定位
定位的目的:确定移动的具体位置。
定位在css中是一个非常重要的概念,主要是针对页面上的元素,进行指定位置排列方式
应用场景:
例如:woniucx.com或者woniuxy.com
怎么设置CSS定位?
-
语法:
<span style="background-color:#f8f8f8"><span style="color:#117700">position</span>:<span style="color:#008855">static</span>; <span style="color:#117700">static</span> 静态定位 <span style="color:#117700">relative</span> 相对定位 <span style="color:#117700">absolute</span> 绝对定位 <span style="color:#117700">fixed</span> 固定定位</span>
设置静态定位 static(了解)
-
默认每个元素都是static定位,参考标准文档流
标准文档流: 在页面布局过程中,元素默认按照从上到下,从左到右,块级元素独占一行,行级元素共享一行的排列规范。
设置相对定位(重点)
-
概念:参考移动之前的位置,按照你指定的方向进行移动
-
语法:
<span style="background-color:#f8f8f8"><span style="color:#117700">position</span>:<span style="color:#008855">relative</span>;</span>
-
定义偏移量:
-
top:设置元素距离上边框的偏移量
-
left:距离左边的偏移量
-
right:距离右边的偏移量
-
bottom:距离下边的偏移量
-
-
特点:
-
设置元素的相对定位后,元素不会脱离文档流,只是破坏文档流
-
什么是破坏文档流?
-
元素在页面布局过程中,元素移动时不遵循标准文档流的规范,移动完成后会回到标准文档流里。只是在移动过程中会破坏文档流的规范。
-
-
-
只给元素设置相对定位,对元素本身是不会有影响,除非设置偏移量,元素才会发生移动
-
元素一旦设置了偏移量,会按照指定的方向进行移动,移动过程中不遵循标准文档流,移动完成后还在标准文档流里面。
-
移动过程是参考原来的位置进行移动
-
原来的位置依然保留,不会消失(原来的空间还在)
-
-
注意:
-
子元素相对定位后,父元素进行移动,子元素会跟着移动(子元素原来的位置跟着父元素一起移动)
-
相对定位一般不会单独使用,也不会单独用来布局,通常配合绝对定位来使用
-
设置绝对定位(重点)
-
概念:元素会脱离文档流,按照你设置的方向进行移动
-
语法:
<span style="background-color:#f8f8f8"><span style="color:#117700">position</span>:<span style="color:#008855">absolute</span>;</span>
-
偏移量
-
top:距离参考位置的上边缘的距离
-
bottom:距离参考位置下边的距离
-
left:距离左边的偏移
-
right:距离右边的偏移
-
定位父级
为什么设置定位父级?
因为绝对定位默认是参考文档进行移动,无法满足定位需求。
怎么设置定位父级?
子绝父相
只需要找到结构父级或者定位父级设置一个相对定位即可,当然设置固定定位和绝对定位也是可以的。 因为相对定位不会影响其他元素的排列,并且相对定位盒子本身不会脱离文档流
-
结构父级:盒子在html代码结构中的父元素
-
定位父级:作为参考位置的父级称为定位父级。父级可以是结构父级,也可以是结构父级的父级。
<span style="background-color:#f8f8f8"> <style> .box2{ width: 400px; height: 400px; background-color: green; /* 设置定位参考位置 position: fixed absolute relative; */ position: relative; } .box3{ width: 100px; height: 100px; background-color: tomato; position: absolute; right: 0; bottom: 0; } </style> <!-- 定位父级 --> <div class="box1"> <!-- 结构父级 --> <div class="box2"> <div class="box3">3</div> </div> </div></span>
绝对定位特点:
-
会脱离文档流,原来的位置不存在
-
绝对定位前面的标准文档流里面的元素是不会受影响。
-
一旦设置了绝对定位,后面绝对定位的元素会盖住前面绝对定位的元素(后面绝对定位元素的层级更高)
-
绝对定位设置偏移量后,是参考整个文档进行移动
-
行级元素也可以设置绝对定位,一旦设置了默认支持宽高
注意:通常需要配合相对定位使用
定位层级
-
设置元素的层级关系,只针对于定位元素(相对定位,固定定位,绝对定位)有效
-
语法:
<span style="background-color:#f8f8f8"><span style="color:#117700">z-index</span>:数字;</span>
-
注意:默认为0 ,值越大,层级越高,可以设置负值,不能是小数
-
如果没有设置z-index,按照代码结构,后面的元素盖住前面元素,后面定位的元素层级更高
-
固定定位 (重点)
-
固定在屏幕上,脱离文档流,按照 指定的方向进行移动
-
语法:
<span style="background-color:#f8f8f8"><span style="color:#117700">position</span>:<span style="color:#008855">fixed</span>;</span>
-
特点:
-
脱离文档流,原来的空间不存在
-
设置偏移量后,是参考整个文档进行移动
-
-
应用场景:头部导航。广告,提示框等等。
粘性(sticky )定位(拓展)
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。
元素定位表现为在跨越特定阈(yu 界限 门坎)值前为相对定位,之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
<span style="background-color:#f8f8f8"><span style="color:#333333"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>粘性定位</title>
<style>
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
</body>
</html></span></span>
定位元素宽度
绝对定位元素的width设置100%默认是参考文档的宽度
-
没有定位父级,100%参考文档的宽度
-
有定位父级,100%参考定位父级的宽度
没有设置定位的元素,100%参考结构父级的宽度
扩展知识:
盒子居中技巧
margin:auto auto
:可以让元素水平居中,但垂直方向无法居中,auto是一个值,浏览器自动计算剩余空间再均分。
网页在垂直方向上高度变化很大,内容不一样,高度就不一样,所以垂直方向上auto被禁用。
方案一:通过margin自动计算
居中盒子上设置绝对定位,使用四个方向都为0,再配合margin:auto auto;
;参考的盒子可以设为定位父级。
居中盒子相对于定位父级进行水平垂直居中,通过margin自动计算再均分
<span style="background-color:#f8f8f8"><span style="color:#333333"> <<span style="color:#117700">style</span>>
<span style="color:#555555">.box1</span>{
<span style="color:#000000">width</span>: <span style="color:#116644">500px</span>;
<span style="color:#000000">height</span>: <span style="color:#116644">500px</span>;
<span style="color:#000000">background-color</span>: <span style="color:#770088">blue</span>;
<span style="color:#aa5500">/*定位父级*/</span>
<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;
}
<span style="color:#555555">.box2</span>{
<span style="color:#000000">width</span>:<span style="color:#116644">100px</span>;
<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;
<span style="color:#000000">background-color</span>: <span style="color:#770088">aqua</span>;
<span style="color:#aa5500">/* 设置绝对定位 */</span>
<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;
<span style="color:#aa5500">/*设置偏移量来确定它的活动范围 */</span>
<span style="color:#000000">top</span>:<span style="color:#116644">0</span>;
<span style="color:#000000">right</span>: <span style="color:#116644">0</span>;
<span style="color:#000000">bottom</span>: <span style="color:#116644">0</span>;
<span style="color:#000000">left</span>:<span style="color:#116644">0</span>;
<span style="color:#000000">margin</span>: <span style="color:#221199">auto</span> <span style="color:#221199">auto</span>;
}
</<span style="color:#117700">style</span>>
<<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"box1"</span>>
<<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"box2"</span>></<span style="color:#117700">div</span>>
</<span style="color:#117700">div</span>></span></span>
方法二:借助calc函数进行元素
局限性:父盒子必须是正方形,因为margin设置百分比是参考父盒子的宽度。
margin-top: 大盒子的高度的一半,减小小盒子高度的一半
margin-left:大盒子宽度的一半,减去小盒子宽度的一半
注意:借助calc配合marign使盒子居中,需要父盒子的宽度和高度一致,才有效。否则不能使用。并且calc函数还有兼容性问题
<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">/* 借助calc函数自动计算,可以进行加减乘除的运算 */</span>
<span style="color:#aa5500">/* calc函数的符号前后需要空格隔开 */</span>
<span style="color:#117700">margin-top</span>: <span style="color:#008855">calc</span>(<span style="color:#116644">50%</span> - 小盒子高度的一半);
<span style="color:#117700">margin-left</span>: <span style="color:#008855">calc</span>(<span style="color:#116644">50%</span> - 小盒子宽度的一半);</span></span>
-
注意:margin和padding设置百分比时,是参考父盒子的宽度。无论哪个方向都是参考宽度。
方案三:使用绝对定位,配合marign可以实现
绝对定位使用top:50%,left:50%,然后设置margin-top为小盒子高度的一半(负值),margin-left为小盒子宽度的一半(负值)
好处:兼容性比较好
坏处:margin-top和margin-left需要自己计算
<span style="background-color:#f8f8f8"><span style="color:#333333"> <<span style="color:#117700">style</span>>
<span style="color:#555555">.box1</span>{
<span style="color:#000000">width</span>: <span style="color:#116644">900px</span>;
<span style="color:#000000">height</span>: <span style="color:#116644">400px</span>;
<span style="color:#000000">background-color</span>: <span style="color:#770088">yellow</span>;
<span style="color:#aa5500">/* 设置定位父级 */</span>
<span style="color:#000000">position</span>: <span style="color:#221199">relative</span>;
}
<span style="color:#555555">.box2</span>{
<span style="color:#000000">width</span>:<span style="color:#116644">300px</span>;
<span style="color:#000000">height</span>: <span style="color:#116644">100px</span>;
<span style="color:#000000">background-color</span>:<span style="color:#770088">green</span>;
<span style="color:#000000">position</span>: <span style="color:#221199">absolute</span>;
<span style="color:#000000">top</span>:<span style="color:#116644">50%</span>;
<span style="color:#000000">left</span>:<span style="color:#116644">50%</span>;
<span style="color:#000000">margin-top</span>: <span style="color:#116644">-50px</span>;
<span style="color:#000000">margin-left</span>: <span style="color:#116644">-150px</span>;
}
</<span style="color:#117700">style</span>>
<<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"box1"</span>>
<<span style="color:#117700">div</span> <span style="color:#117700">class</span>=<span style="color:#aa1111">"box2"</span>></<span style="color:#117700">div</span>>
</<span style="color:#117700">div</span>></span></span>