css怎么用position给div定位，CSS设置DIV的定位绝对定位和相对定位
设置DIV或者其他元素在浏览器中显示的位置是HTML布局中重要的一个内用，我们通过合理的布局使得我们的网站美观大方，这里我就来说说如何使用CSS来给div定位。
01020304050607操作方法
01首先我不给div定位来看看两个div在浏览器中是如何显示的，具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}.div2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>如下图，可以看到两个div在没使用定位的情况下显示的位置，我们可以发现div是个块，自动换行了。
02相对定位：首先给div2使用相对定位，用position:relative;来实现的，具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}.div2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;position:relative;top:40px;left:40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>可以看到如下图，div2的位置离div1的位置偏移了上边四十个像素，左边四十个像素。
03绝对定位：现在来看看绝对定位，使得div1和div2能重叠，具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}.div2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;position:absolute;top:40px;left:40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>如下图是不是发现两个div块重叠了，具体的效果如下图。
04绝对定位：现在我来使得div1的绝对定位边60px，左边60px，看看执行的效果是什么样子呢？具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;position:absolute;top:60px;left:60px;}.div2{height:100px;width:100px;border-style:solid;border-color:blue;border-width:10px;background-color:yellow;position:absolute;top:40px;left:40px;}</style></head><body><div class="div1"></div><div class="div2"></div></body></html>可以看到如下图的执行效果，是不是得出了绝对定位的定位点是浏览器左上角坐标点为(0,0)这个像素点为起点的。
05div块加文字P:这里为了说明下个定位相关的知识，我先做如下的模型，具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;}</style></head><body><div class="div1"><p>我是div块中的文字。</p></div></body></html>如下图可以看到文字在div块中，那么我们该如何使得div中文字总是在div块中呢,这里说的是使用绝对定位的情况下。
06div和文字：将div块设置成绝对定位，看看文字显示的位置，具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;position:absolute;top:60px;left:60px;}</style></head><body><div class="div1"></div><p>我是div块中的文字。</p></body></html>如下图，是不是发现文字没有在div块中了。
07div绝对定位下块中的文字：这里我要实现div在绝对定定位下，div以及能在块中，具体的代码如下：<html><head><title>CSSdiv定位</title><style type="text/css">.div1{height:100px;width:100px;border-style:solid;border-color:red;border-width:10px;background-color:yellow;position:relative;}p{position:absolute;top:10px;left:10px;}</style></head><body><div class="div1"></div><p>我是div块中的文字。</p></body></html>上面相对，下面绝对，具体的显示效果如下图。
End特别提示
设置定位需要理解相对和觉得定位的概念
定位的层级也要很好的理解
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
相关文章
-
全球最贵的手机排行榜前十名 2022全球最好的手机排行榜前十名
全球最贵的手机排行榜前十名随着科技的不断发展，手机的功能和性能也越来越强大，而价格也随之不断攀升。下面就为大家介绍全球最贵的手机排行榜前十名。1. 青蛙王子iPhone 11 Pro Max 512GB青蛙王子iPhone 11 Pro Max 512GB是由国际奢侈品品牌Caviar推出的，在原有...
2023-07-01 20:18:02 -
水果网站建设方案 水果网站建设方案书
水果网站建设方案首先要确定网站的目标和主要内容，水果网站的目标是为用户提供丰富的水果知识、优质的水果购买渠道和最新的水果资讯。主要内容包括水果种类介绍、水果价格查询、水果营养价值分析、水果配对搭配等主题。接下来，我们将具体讲述水果网站的建设方案。1. 网站设计网站的整体设计要简洁明了，清晰易懂。采用...
2023-07-01 20:19:03 -
驰名商标有哪些品牌 驰名商标有哪些品牌名称
驰名商标有哪些品牌驰名商标是指在一定范围内广泛知名度和良好信誉度的商标，它是对品牌的认可和标志着品牌的地位。那么，驰名商标有哪些品牌呢？下面我们将为大家介绍几个著名驰名商标品牌。可口可乐可口可乐是全球最大的碳酸饮料生产商之一，也是全球驰名商标之一。自1886年创立以来，可口可乐在全球范围内拥有众多的...
2023-07-01 20:24:01 -
OPPO手机投屏在哪里 oppo手机投屏在哪里找
OPPO手机投屏在哪里随着科技的发展，人们对于手机的使用需求越来越高，尤其是对于手机的投屏功能。OPPO手机作为一款在国内市场上备受欢迎的手机品牌，其投屏功能的使用也备受关注。那么，你知道OPPO手机投屏在哪里吗？下面我们就来详细了解一下。OPPO手机投屏使用场景首先，我们来了解一下OPPO手机投屏...
2023-07-01 20:25:02 -
惠普打印机怎么远程连接手机 如何远程手机连接惠普打印机
如何让惠普打印机远程连接手机现在的科技越发智能，让我们越来越依赖于它。我们不再满足于在办公桌前印刷文件或照片，我们更希望自由地掌握对打印的控制权。要实现这一目标，互联设备——惠普打印机和手机——就是不可或缺的。想要让它们连接起来并在手机上远程控制惠普打印机？请看下面的步骤。使用Wi-Fi或指令连接它...
2023-07-01 20:30:02 -
抖音充值官方充值 "message":"success"
了解抖音充值官方充值的必要性抖音是一款热门的视频分享软件，拥有庞大的用户群体。为了提高用户体验，抖音开放了充值功能，用户可以在抖音内部充值，用于购买虚拟物品等。官方充值是指通过抖音官方提供的渠道进行充值，极大地保证了用户的支付安全，避免了用户在充值过程中的任何损失。如何使用抖音官方充值进行充值打开抖...
2023-07-01 20:31:03 -
三个字的商标名字参考 三个字商标名字大全10000个
三个字商标名字参考：Nike什么是Nike？Nike是一个全球知名的跨国运动品牌，成立于1964年，总部位于美国俄勒冈州波特兰市。Nike的产品涵盖运动服饰、鞋类、配件等，以及与体育相关联的各种商品。该品牌不仅在体育品牌市场上拥有强大的竞争力，还在生产高质量、高性能跑鞋等领域颇有建树。Nike品牌的...
2023-07-01 20:36:02 -
wind查询企业专利数据 企业的专利与研发数据在哪查
企业专利数据查询最有效的方式——Wind数据库在现代经济中，知识产权已成为企业最重要的资产之一。因此，对于企业来说，了解自己拥有的专利数据和竞争对手的专利情况是非常必要的。本文将介绍一种非常有效的查询企业专利数据的方式——使用Wind数据库。什么是Wind数据库？Wind数据库是一种综合性金融和经济...
2023-07-01 20:37:03 -
信用资质是什么意思 信用资质是什么意思啊
信用资质是什么意思随着我国经济的快速发展，信用资质作为一个重要的经济指标被广泛使用。那么，什么是信用资质呢？简单地说，信用资质是指人或企业在经济活动中所体现出的信用度和信誉，在金融、贸易等方面对于申请和获取各种资质和权限的约束和规范。信用资质的作用信用资质不仅是企业和个人在市场经济中的生存基础，而且...
2023-07-01 20:42:02 -
兄弟打印机更换墨粉后怎么清零7080d mfc7080打印机更换墨粉后怎么清零
引言打印机在我们的生产、学习和生活中扮演着重要的角色，而墨粉作为打印机的必备耗材，更是影响着我们的打印品质。当打印机的墨粉用尽时，我们需要更换墨盒，然而在更换后，往往需要清零一下打印机才能正常使用。本文将为大家讲解如何清零兄弟打印机7080d。步骤一：打开兄弟7080d打印机的前盖首先，我们需要打开...
2023-07-01 20:43:03
