【JavaScript】div+css定位position詳解
阿新 • • 發佈:2019-01-25
1、div+css中的定位position 最主要的兩個屬性:absolute(絕對定位)、relative(相對定位)
(1)absolute(絕對定位),位置將依據瀏覽器左上角開始計算。 絕對定位使元素脫離文件流,因此不佔據空間。
(2)relative(相對定位),定位是相對的,那他是相對於什麼呢?參照物是什麼?
看程式碼:
效果:<span style="font-size:18px;"><style type="text/css"> #left{background:#cccccc;width:200px;height:200px;float:left;} #center{background:#eee;width:200px;height:200px;float:left;} #right{background:#666666;width:200px;height:200px;float:left;} </style> <div id="left"></div> <div id="center"></div> <div id="right"></div> </span>
2、relative(相對定位),給中間的div增加定位屬性:position:relative; top:10px; left:10px;
程式碼:
效果:<span style="font-size:18px;"><style type="text/css"> #left{background:#cccccc;width:200px;height:200px;float:left;} #center{background:#eee;width:200px;height:200px;float:left;position:relation;top:<span style="font-family:KaiTi_GB2312;">1</span>0px;left:<span style="font-family:KaiTi_GB2312;">1</span>0px;} #right{background:#666666;width:200px;height:200px;float:left;} </style> <div id="left"></div> <div id="center"></div> <div id="right"></div></span>
結果:很明顯它現在移動的參照物就是它原來所佔據的位置
注意:位置屬性 top、 right 、left 、bottom 只能引用相鄰的兩個邊,不能只用上下,或者只用左右。
3、absolute(絕對定位),給中間的div增加定位屬性:position:absolute; top:30px; left:30px;
程式碼:
<span style="font-size:18px;"><style type="text/css"> #left{background:#cccccc;width:200px;height:200px;float:left;} #center{background:#eee;width:200px;height:200px;float:left;position:absolute;top:30px;left:30px;} #right{background:#666666;width:200px;height:200px;float:left;} </style></span>
效果:
結果:
發現中間的div脫離了文件流,右側的和左側div挨著了,現在中間的div的位置是從瀏覽器的左上角開始計算位置即向下移動30畫素,向右移動30畫素。現在就涉及到一個層級的關係,設定div的z-index屬性,數值越大的,層顯示在最上邊。
想要了解更多的小夥伴們可以點選這裡: