溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹css中有哪些定位方式，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
/*通配符選擇器*/
*{
margin:0px;
padding:0px;
}
/*div的選擇器*/
.div1{
border:1px solid red;
background:silver;
width:60px;
height:30px;
float:left;
margin-left:5px;
}
.div2{
position:relative;
left:10px;
top:10px;
width:100px;
height:80px;
background:pink;
float:left;
margin-left:5px;
}
/*相對定位，他原來的空間任然保留*/
#spe{
position:relative;
top:40px;
left:20px;
}
/*絕對定位:元素框從文檔流里完全刪除
對該元素最近的那個脫離了標準流的元素定位*/
#spe2{
position:absolute;
top:40px;
left:20px;
}
/*固定定位，只想對于視圖的左上角定位*/
#spe{
position:fixed;
top:40px;
left:20px;
}
/*靜態定位是默認的static left、top此時沒有效果
靠margin來移動位置*/
/*z-index用于設置對象（div）顯示時候，層疊的屬性，
z-index值越小，則越在下層顯示*/
[html] view plaincopy在CODE上查看代碼片派生到我的代碼片
<html>
<head>
<link rel="stylesheet" type="text/css" href="position.css"/>
</head>
<body>
<div class="div1">內容1</div>
<div class="div1">內容3</div>
<div class="div1">內容4</div>
<div class="div2">
<div class="div1" id="spe2">內容2</div>
</div>
</body>
</html>關于css中有哪些定位方式就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
