css相对定位和绝对定位
<html> <head> <title>css相对定位和绝对定位</title> <style type = "text/css" > body,div { margin:0; padding:0; height:2000px; } #div1 { width:200px; height:200px; background-color: red; position:absolute; z-index:2; /* left:100px; top:20px; 1.采用相对定位后,left和right, top和bottom只能设置一个 2.相对定位,相对于原来的位置而言。设置相对定位的元素依然会占用原 来的空间。仍在标准流中。 */ } #div2 { width:200px; height:200px; background-color:#369369; position:absolute; left:20px; top:20px; z-index:-1; /* 3.绝对定位,针对body页面左上角而言的。left看不出来的, 只有top,bottom才可以看出与relative的区别 4.设置为绝对定位的元素不会占用原来的空间,会脱离标准流 */ } #div3 { width:200px; height:200px; background-color:blue; /* position:fixed; left:20px; top:50px; 5.固定定位,与绝对定位一样都会脱离标准流 6.固定定位,针对浏览器窗口而言的。absolute针对body(0,0)而言的。 */ } /* 重叠元素的堆叠顺序 z-index ;前提是只有设置了以上三种定位才有用。 设置的数值越大,堆叠越在上层。也可以用负值。 */ </style> <meta charset = "utf-8" /> <!--<link rel = "stylesheet" style = "text/css" href = "style/css.css" />--> </head> <body> <div id = "div1" >div1</div> <div id = "div2" >div2</div> <div id = "div3" >div3</div> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。