css定位详解,css定位不了- 畅鱼网

为什么需要定位?

浮动可以让多个块级盒子一行没有缝隙排列显示,多用于横向排列盒子.
定位则可让盒子自由地在某个盒子内移动或者固定屏幕某个位置,并且可以压住其他盒子.

定位组成

定位:将盒子定在某一个位置

定位=定位模式+边偏移

定位模式~>指定一个元素在文档中的定位方式

div { /* 定位模式 值 static~>静态定位 (默认方式) 无定位 relative~>相对定位 absolute~>绝对定位 fixed~>固定定位 */ position: static; }

边的偏移~>决定了该元素的最终位置

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; position: absolute; /* 偏移方向:偏移距离 上 下 左 右 */ top: 100px; bottom: 100px; left: 100px; right: 100px; background-color: lightsteelblue; } </style></head><body> <div>盒子A</div></body></html>

相对定位 relative

相对定位是元素在移动位置的时候,相当于它原来的位置

特点:

移动位置的时候参照点是自己原来的位置
原来在标准流的位置继续占有.后面盒子仍然以标准流的方式对于它

实践效果:

代码展示:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; } .Lazy { position: relative; top: 100px; left: 100px; background-color: lightsteelblue; } </style></head><body> <div class="Lazy">懒羊羊</div> <div>喜羊羊</div></body></html>

绝对定位 absolute

绝对定位是元素在移动位置的时候,是相对于它祖先的元素来说的

特点:

如果没有祖先元素/祖先元素没有定位,则以浏览器为准定位(Document文档)
绝对定位不再占有原先的位置
如果祖先的元素有定位(相对绝对固定),则以最近一级有定位祖先为参考点移动位置

实践

1.祖先元素无定位以浏览器为基础

效果展示:

代码展示:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .Pleasant { float: right; width: 400px; height: 400px; background-color: pink; } .small-bell { position: absolute; width: 200px; height: 200px; top: 50px; left: 50px; background-color: lightsteelblue; } </style></head><body> <div class="Pleasant"> 喜羊羊 <div class="small-bell">铃铛</div> </div></body></html>

2.祖先有定位以上一级为基础

效果展示

代码展示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .sheep { position: absolute; background-color: sandybrown; width: 600px; height: 600px; } .Pleasant { position: absolute; bottom: 50px; width: 400px; height: 400px; background-color: pink; } .small-bell { position: absolute; width: 200px; height: 200px; top: 50px; left: 50px; background-color: lightsteelblue; } </style></head><body> <div class="sheep"> <div class="Pleasant"> 喜羊羊 <div class="small-bell">铃铛</div> </div> </div></body></html>

子绝父相

子级是绝对定位的话父级要用相对定位

使用原因:

子盒子绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时,需要占有位置,因此父盒子只能相对定位

总结:父级需要占用位置,则选相对定位.子盒子不需要占位置,则选择绝对定位

但是不是一成不变 按需求来开发灵活变动

实践

使用效果

代码展示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .box { height: 240px; padding: 20px 5px; border: 1px solid coral; } .goods { position: relative; width: 200px; height: 200px; } .goods .hot { position: absolute; top: -7px; right: -10px; width: 25px; }</style><body> <div class="box"> <div class="goods"> <img class="hot" src="img/hot.png" alt=""> <img src="img/thing.png" alt=""> </div> </div></body></html>

固定定位 fixed

固定定位是元素固定于浏览器可视区域的位置

特点

1.以浏览器的可视窗口为参照点移动元素(跟父元素没有任何关系,不随滚动条滚动)

2.固定定位不再占有原先的位置

大厂使用案例:

实践

效果展示

代码展示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fixed</title></head><style> .core { width: 900px; height: 1300px; margin: 0 auto; background-color: #11659a; } /* 固定标签的基本用法 */ .navigation { position: fixed; width: 900px; height: 50px; background-color: darkgoldenrod; } /* 小技巧 固定在版心右侧位置 */ /* 1.让固定定位的盒子left:50% 走到浏览器可视区的一半位置 2.让固定定位的盒子margin-left:版心宽度的一半距离(如此案例 900px宽度 一半450px 为了存在缝隙 可多些距离) 多走版心宽度的一半位置 就实现让固定定位的盒子贴着版心右侧对齐了 */ .tag { width: 50px; height: 50px; background-color: #12a182; position: fixed; top: 100px; left: 50%; margin-left: 455px; }</style><body> <div class="core"> <div class="navigation"></div> <div class="tag">TAG</div> </div></body></html>

粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合

特点

以浏览器的可视窗口为参照点移动元素
占有原先的位置(相对定位的特点)
必须添加top left right bottom 其中一个才有效
跟页面滚动搭配使用

大厂使用案例:

实践

使用效果:

代码展示:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fixed</title></head><style> .core { width: 900px; height: 1300px; margin: 0 auto; background-color: #11659a; } /* 固定标签的基本用法 */ .navigation { position: sticky; /* 必须存在一个偏移量 */ top: 0; width: 900px; height: 50px; background-color: darkgoldenrod; }</style><body> <div class="core"> <div class="navigation"></div> <span>河边芦苇密又繁，秋深露水结成霜。意中之人在何处？就在河水那一方。</span> <br> <span> 逆着流水去找她，道路险阻又太长。顺着流水去找她，仿佛在那水中央。</span> <br> <span>河边芦苇密又繁，清晨露水未曾干。意中之人在何处？就在河岸那一边。</span> <br> <span>逆着流水去找她，道路险阻攀登难。顺着流水去找她，仿佛就在水中滩。</span> <br> <span>河边芦苇密稠稠，早晨露水未全收。意中之人在何处？就在水边那一头。</span> <br> <span>逆着流水去找她，道路险阻曲难求。顺着流水去找她，仿佛就在水中洲。</span> </div></body></html>

定位小总结

定位模式	是否脱标	移动位置
static(默认)	否	不能使用边偏移
relative	否(占有位置)	相对于自身位置移动
absolute	是(不占有位置)	带有定位的父级
fixed	是(不占有位置)	浏览器可视区
sticky	否(占有位置)	浏览器可视区

定位叠放次序 z-index

在使用定位布局时,可能会出现盒子重叠的情况.

可以使用z-index来控制盒子的前后次序 z轴

数值可为正/负/0(无单位) 默认auto,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
只有定位盒子才有z-index属性

实践

效果展示

代码展示

无z-index时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> div { position: absolute; width: 300px; height: 300px; } div:nth-child(1) { background-color: lightblue; top: 50px; left: 50px; } div:nth-child(2) { background-color: lightpink; top: 100px; left: 100px; } div:nth-child(3) { background-color: lightyellow; top: 150px; left: 150px; }</style><body> <div>光头强</div> <div>熊大</div> <div>熊二</div></body></html>

有z-index时

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> div { position: absolute; width: 300px; height: 300px; } div:nth-child(1) { background-color: lightblue; top: 50px; left: 50px; /* 层级排上 */ z-index: 1; } div:nth-child(2) { background-color: lightpink; top: 100px; left: 100px; } div:nth-child(3) { background-color: lightyellow; top: 150px; left: 150px; }</style><body> <div>光头强</div> <div>熊大</div> <div>熊二</div></body></html>

定位拓展

1.绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto水平居中,但是通过计算实现水平和垂直居中