1、定位的叠放次序（只有定位的盒子才拥有这个属性）
（1）在使用定位布局的时候，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序。该属性的值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; width: 200px; height: 200px; background-color: yellow; z-index: 5; } .test2 { position: absolute; width: 200px; height: 200px; background-color: red; z-index: 3; } .test3 { position: absolute; width: 200px; height: 200px; background-color: black; z-index: -1; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </body> </html>
（2）如果盒子的z-index属性的值相等，那么后来者居上
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; width: 200px; height: 200px; background-color: yellow; } .test2 { position: absolute; width: 200px; height: 200px; background-color: red; } .test3 { position: absolute; width: 200px; height: 200px; background-color: black; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </body> </html>
2、绝对定位的盒子水平居中
加了绝对定位的盒子不能通过margin :0 auto水平居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; left: 50%; margin-left: -100px; width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="test1"></div> </body> </html>
先将盒子的左侧调整到浏览器的中间位置，然后再向左侧移动盒子宽度的一半
3、定位的特性
（1）绝对定位和浮动类似，行内元素添加绝对定位或固定定位后就可以直接设置高度或宽度
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="test1"></div> </body> </html>
（2）块级元素添加绝对定位或固定定位，如果不设置高度或宽度，默认大小是内容的大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; background-color: yellow; } </style> </head> <body> <div class="test1">你好</div> </body> </html>
（3）浮动的元素只会压住标准流的盒子，但是不会压住标准流里盒子的文字或图片，但是绝对定位或固定定位会压住标准流的所有内容
浮动：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { float: left; background-color: yellow; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <p>早上好，今天是星期一</p> </body> </html>
定位：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { position: absolute; background-color: yellow; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <p>早上好，今天是星期一..................</p> </body> </html>
—-想了解更多的css相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/csstutorial/123048.html