一、相对定位
相对定位,就是相对自己原来的位置发生变化，利用 left right top bottom 四个方向进行设置
1.1 如何设置相对定位？
- 给元素设置 position:relative 即可实现相对定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
1.2 相对定位特点
- 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是:
- 定位的元素会盖在普通元素之上
- 都发生定位的两个元素，后写的元素会盖在先写的元素之上
- left 不能和 right 一起设置， top 和 bottom 不能一起设置。
- 相对定位的元素，也能继续浮动，但不推荐这样做。
- 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
1.3 代码+代码
结合上面特点，在父容器里面设置三个div元素，然后进行 各个位置的改变，验证各个特点；
公共部分代码
<title>相对定位</title> <style> .outer { width: 500px; border: 1px solid black; background-color: #ccc; padding: 20px; } .box1 { width: 200px; height: 200px; background-color: red; } .box2 { width: 200px; height: 200px; background-color: yellow; position: relative; /* 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 */ left: 100px; top: 50px; } .box3 { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> </body>
效果图1
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
/* 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 */
left: 100px;
top: 50px;
}
效果2
利用定位，将2的元素盖在3的元素上面
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
top: 200px;
}
效果4
通过定位，然后设置margin-设置
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
/* top: 200px; */
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
margin-left: 10px;
margin-top: 10px;
}
1.4 总结
绝大多数情况下，相对定位，会与绝对定位配合使用。
二、绝对定位
- 给元素设置 position: absolute 即可实现绝对定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置
2.1 绝对定位参考点在哪
参考它的包含块。
-
什么是包含块？
- 对于没有脱离文档流的元素：包含块就是父元素；
- 对于脱离文档流的元素：
- 包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
没定位，那包含块就是整个页面）。
-
2.2 绝对定位元素特点
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置， top 和 bottom 不能一起设置。
- 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为。
- 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
2.3 代码 + 代码
我们采用绝对定位，将元素2放到3的右边，类似于京东效果，鼠标移动到左边菜单，在中间弹出了一个层，盖住了中间元素
公共代码
<title>相对定位</title> <style> .outer { width: 500px; border: 1px solid black; background-color: #ccc; padding: 20px; position: relative; } .box { width: 200px; height: 200px; } .box1 { background-color: red; } .box2 { background-color: yellow; position: absolute; top: 220px; left: 20px; } .box3 { background-color: blue; } .outer:hover .box2 { left: 220px; top: 220px; transition: 1s all linear; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> </div> </body>效果1
.outer:hover .box2 {
left: 220px;
top: 220px;
transition: 1s all linear;
}
三、固定定位
固定为视口，文档的视口，我们常常浏览的一些网站，右下角一般会弹出广告
3.1 如何设置为固定定位？
- 给元素设置 position: fixed 即可实现固定定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。
3.2 固定定位的参考点？
- 参考它的视口
- 什么是视口？
- —— 对于 PC 浏览器来说，视口就是我们看网页的那扇“窗户”。
3.3 固定定位元素的特点
- 脱离文档流，会对后面的兄弟元素、父元素有影响。
- left 不能和 right 一起设置， top 和 bottom 不能一起设置。
- 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
- 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
- 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。
3.4 代码 + 效果
代码部分
<title>固定定位</title> <style> .outer { width: 500px; border: 1px solid black; background-color: #ccc; padding: 20px; } .box { width: 200px; height: 200px; } .box1 { background-color: red; } .box2 { background-color: yellow; position: fixed; right: 10px; bottom: 10px; } .box3 { background-color: blue; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">点我有精彩内容。。。。 </div> <div class="box box3">3</div> </div> <div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum, unde, optio cupiditate in aliquid ad nemo aperiam consequuntur laborum doloribus assumenda placeat quae dolorem hic enim quam, eum ipsum maxime eaque reiciendis voluptatibus. Voluptates minima molestiae similique delectus cupiditate fugiat magni soluta ducimus, officia deserunt esse, quam minus facilis harum. Provident, tempore. Sed iusto cumque autem quam! Sint porro suscipit quod aperiam commodi numquam quis in omnis sed modi temporibus exercitationem, maiores delectus eius placeat ullam. Facere quaerat eius perferendis delectus sequi saepe cum culpa, quibusdam natus maxime odio eveniet quo, sunt commodi, provident tenetur quod nemo qui cumque temporibus! Vitae provident nobis dolore nulla aspernatur est sunt vero, eligendi commodi id magni ad laudantium laboriosam sequi, illo officiis dolor. Modi iusto in distinctio veritatis dolorem possimus! Repudiandae alias quo, sunt natus perspiciatis totam qui dolorum blanditiis voluptas pariatur laborum labore odit ipsam deserunt non sed ad ipsa hic corrupti quae eum nihil reprehenderit nulla ea. Assumenda, dolore tenetur ipsa sint dolor animi quae illo quas vel ut atque earum veritatis dolorem nisi pariatur a possimus quisquam quibusdam sequi culpa. Ullam ab quam beatae fugiat placeat delectus aperiam at expedita nihil, nobis veniam, autem nam. Suscipit, corrupti iure dolores officia libero magnam nostrum vitae, facilis, eos totam veritatis quas. Voluptatem, deserunt atque maiores veniam nemo expedita fugiat aliquam distinctio, inventore rerum, nam perferendis. Ducimus quo suscipit ipsam magni. Provident iure obcaecati totam adipisci quam corrupti numquam? Sit sapiente quia iusto hic minus ad aliquid ipsam velit ipsum, nesciunt repellat suscipit deleniti, placeat laudantium! Velit, nostrum quas consectetur in quibusdam praesentium quae corrupti architecto recusandae omnis alias iure perferendis, magnam, laborum atque nisi commodi vero sed repudiandae esse? Molestias, veniam illo magni quasi corrupti quas perferendis iste dolorem culpa dolore maxime aliquid praesentium numquam nulla esse. Ex ea omnis iusto ipsum temporibus aut, impedit cum neque quidem aperiam soluta esse velit! Nemo, ducimus, assumenda eaque provident molestias non labore pariatur deserunt repellendus explicabo dicta sint corrupti quod eum minus? Ea debitis aliquid fugiat repudiandae? Ex, est aliquam voluptatum cum error facere dicta neque at nemo non nihil quo magnam perferendis incidunt, exercitationem suscipit, dolorem consequuntur architecto praesentium? Delectus fuga eius accusamus provident minus asperiores recusandae eaque. Voluptas consectetur sapiente optio dolorum, eaque perferendis voluptates suscipit quis recusandae accusamus laboriosam nam neque, minus maiores corporis voluptatem! A excepturi eligendi cumque? Numquam veritatis aliquid, optio iure eius, excepturi et voluptatibus ipsum eos aspernatur atque rem distinctio quos. Nesciunt fugit, deleniti assumenda laudantium laboriosam cupiditate corrupti deserunt eos, veniam accusantium voluptas! Dolor inventore alias ad, quod consectetur ipsa dolore iusto laboriosam molestiae sit quae deleniti aspernatur magnam tempora numquam minima est magni accusantium, ab architecto impedit quibusdam delectus cum. Soluta ad saepe eveniet, incidunt sit laudantium ex non necessitatibus nam provident unde. Eius minima quidem accusamus eum saepe ut, eos alias accusantium odio? Cumque totam quod libero dolor nesciunt a consectetur maxime dolores numquam ab, voluptate amet omnis quo deserunt sunt praesentium inventore, iure officiis animi? Sunt laboriosam eius harum eaque exercitationem architecto dolorum quo, nihil doloremque velit illum inventore corporis ipsa magnam aut, pariatur voluptatem, eveniet tenetur voluptatibus rerum esse! Quis numquam pariatur consequuntur temporibus eaque sapiente repudiandae repellendus deserunt earum suscipit? Totam error enim animi dolores iste placeat illum eius, molestias aperiam id ut voluptatem, distinctio sit at necessitatibus, autem praesentium minima quod. Fugit eaque eius aspernatur labore sint natus laborum omnis assumenda ex possimus est rerum, culpa dolor, accusamus facilis fugiat nulla expedita illo recusandae non repellendus. Laboriosam corporis aspernatur similique quisquam libero dolore nemo aperiam necessitatibus illo quam alias inventore odit veniam, animi, neque numquam qui iure rem facilis, veritatis pariatur laborum dolorem a! Maiores perspiciatis eum enim, dolores impedit possimus sit quis, esse sed rem animi voluptatum at labore est illo atque iusto ex voluptas et dolorum? Provident omnis vitae, atque ex placeat voluptates vel exercitationem. Ad vero maxime dolor, odio nam deserunt neque consectetur. Temporibus fugiat dicta tempora numquam dolorem, veritatis eveniet, natus recusandae voluptates maiores cupiditate iure sint? Neque vel ullam tempore corrupti qui, iusto totam! Quod, deserunt. Dolor, odit corporis quo consectetur atque incidunt accusantium dignissimos deserunt eos itaque sit aut dolore repellendus obcaecati, ipsum ut dicta magnam placeat blanditiis animi molestiae? Harum cumque repellendus porro amet eius, corrupti recusandae molestias eos excepturi iure, asperiores, illo numquam saepe. Animi ab quis eos aperiam repudiandae inventore iusto fugit voluptate, reiciendis perspiciatis nam voluptas sit harum ducimus? Similique natus quas, eius alias iste odio. Tempora nulla similique impedit perferendis eos aspernatur harum corporis reiciendis officia, quas unde, veritatis delectus enim sit sint eum fuga temporibus quibusdam. Molestias suscipit alias repudiandae praesentium dolor quisquam nobis ipsum eveniet ex laboriosam! Culpa neque a sunt ducimus tenetur aspernatur dolores quisquam quaerat? Laudantium itaque, obcaecati repellat dolor aspernatur quibusdam, totam perferendis est ab, dolorum unde officia! Sed quae reiciendis adipisci iste. Velit distinctio atque at, nihil, maxime inventore quibusdam a repudiandae soluta dolorum consequuntur mollitia sequi cumque quia non! Excepturi perferendis quam distinctio odio veritatis aspernatur voluptates itaque animi labore quas? Nulla ut asperiores id! Culpa, ut nihil odio quas provident aliquam itaque, inventore aperiam laboriosam earum eius cupiditate in omnis illum accusamus? Magni tempore tempora doloremque porro? Ut autem nihil, ducimus modi nisi exercitationem commodi soluta doloremque aliquam illo vel cum voluptate magni aperiam labore pariatur quo aut facere. Libero repellat architecto, cum voluptate officia eligendi odio debitis nihil dolorum voluptatibus error, assumenda eos sint id! Animi quam eaque quo, totam architecto incidunt laboriosam sint nulla consequatur, aliquam dolorem soluta! Quam animi maxime laboriosam perferendis minus consectetur deserunt, maiores voluptatem omnis, blanditiis voluptas dolor neque ad aspernatur a accusamus! Accusantium saepe libero, facilis suscipit ipsam perferendis fugiat porro dolores veritatis modi odit! Omnis est ea cum aspernatur assumenda magni expedita illum voluptatibus at. Ullam dolorem repellat velit magni minus, eligendi vel blanditiis in suscipit reiciendis! Nostrum enim, ex sed perspiciatis voluptatum cum maxime sint id assumenda odit neque rem similique esse nemo aliquid aut ipsa ea. Fugit veritatis quaerat sequi nam? Quibusdam corrupti explicabo odio repellat est quam obcaecati non magni!</div> </body>效果
四、黏性定位
黏性定位有特殊的应用场景，就是一个内容标题一直悬浮起来，当滑到该位置后，下一个元素就会改变
4.1 如何设置为粘性定位？
- 给元素设置 position:sticky 即可实现粘性定位。
- 可以使用 left 、 right 、 top 、 bottom 四个属性调整位置，不过最常用的是 top 值。
4.2 粘性定位的参考点在哪里？
- 离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
4.3 粘性定位元素的特点
- 不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
- 最常用的值是 top 值。
- 粘性定位和浮动可以同时设置，但不推荐这样做。
- 粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
4.4 代码 + 效果
效果图
代码
<title>黏性定位</title> <style> * { margin: 0; padding: 0; } body { height: 3000px; } .page-header { height: 100px; background-color: orange; font-size: 30px; text-align: center; line-height: 100px; } .item { background-color: gray; } .first { background-color: skyblue; font-size: 30px; position: sticky; top: 0; } </style> </head> <body> <div class="page-header">头部区域</div> <div class="content"> <div class="item"> <div class="first">A</div> <h2>A1</h2> <h2>A2</h2> <h2>A3</h2> <h2>A4</h2> <h2>A5</h2> <h2>A6</h2> <h2>A7</h2> <h2>A8</h2> </div> <div class="item"> <div class="first">B</div> <h2>B1</h2> <h2>B2</h2> <h2>B3</h2> <h2>B4</h2> <h2>B5</h2> <h2>B6</h2> <h2>B7</h2> <h2>B8</h2> </div> <div class="item"> <div class="first">C</div> <h2>C1</h2> <h2>C2</h2> <h2>C3</h2> <h2>C4</h2> <h2>C5</h2> <h2>C6</h2> <h2>C7</h2> <h2>C8</h2> </div> </div> </body>注意：经测试谷歌浏览器可以使用，搜狗浏览器不能实现该效果
五、定位层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
- 如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
- 可以通过 css 属性 z-index 调整元素的显示层级。
- z-index 的属性值是数字，没有单位，值越大显示层级越高。
- 只有定位的元素设置 z-index 才有效。
- 如果 z-index 值大的元素，依然没有覆盖掉 z-index 值小的元素，那么请检查其包含块的层级。
5.1 代码 + 效果
效果
代码
<title>定位层级</title> <style> .outer { width: 800px; background-color: #888; border: 1px solid black; position: relative; padding: 20px; } .box { width: 200px; height: 200px; font-size: 30px; } .box1 { background-color: red; } .box2 { background-color: yellow; position: relative; top: -150px; left: 80px; } .box3 { background-color: green; position: absolute; top: 150px; left: 170px; } .box4 { background-color: pink; position: fixed; top: 230px; left: 240px; z-index: 50; } .box5 { background-color: purple; position: fixed; top: 300px; left: 300px; z-index: 51; } </style> </head> <body> <div class="outer"> <div class="box box1">1</div> <div class="box box2">2</div> <div class="box box3">3</div> <div class="box box4">4</div> </div> <div class="box box5">5</div> </body>
六、定位特殊应用
- 发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高被内容撑开，且依然可以设
置宽高。- 发生相对定位后，元素依然是之前的显示模式。
- 以下所说的特殊应用，只针对 绝对定位 和 固定定位 的元素，不包括相对定位的元素。
6.1 让定位元素的宽充满包含块
- 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为 0 。
- 高度想与包含块一致， top 和 bottom 设置为 0 。
代码 + 效果
效果
代码
<title>定位特殊应用1</title> <style> .outer { width: 800px; height: 600px; background-color: #888; position: relative; } .innter { background-color: palegreen; font-size: 20px; padding: 20px; border: 10px solid black; position: absolute; left: 0; right: 0; /* top: 0; bottom: 0; */ } </style> </head> <body> <div class="outer"> <div class="innter">你好啊！！</div> </div>
6.2 让定位元素在包含块中居中
方案1
left:0; right:0; top:0; bottom:0; margin:auto;方案2
left: 50%; top: 50%; margin-left: 负的宽度一半; margin-top: 负的高度一半;注意：该定位的元素必须设置宽高！！！
代码+效果
效果
代码
<title>定位特殊应用2</title> <style> .outer { width: 800px; height: 600px; background-color: #888; position: relative; } .innter { background-color: pink; font-size: 20px; width: 400px; height: 200px; position: absolute; /* 方案1 居中 */ /* left: 0; right: 0; top: 0; bottom: 0; margin: auto; */ /* 方案2居中 */ left: 50%; top: 50%; margin-left: -200px; margin-top: -100px; } </style> </head> <body> <div class="outer"> <div class="innter"></div> </div> </body>