css的三種定位方式使用探討

2024-07-11 08:28:18

字體：大中小

來源：轉載

供稿：網友

css 3種類型定位方式，進行控制頁面布局：普通定位，浮動定位，絕對定位。

默認使用普通流技術再頁面中布局元素，希望表現與普通流不同，另外兩個特性position和float

具體實例

復制代碼

代碼如下:
<html>
<head>
<title>
css定位功能探索
</title>
<style type="text/css">
#relative{
/*相對定位探索
將相對于它在普通流中位置進行定位
相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
相對定位是“相對于”元素在文檔中的初始位置
*/
position: relative;
top: -10px;
left: 30px;
color: red;
}
/*
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊即是body元素
*/
#absolute1{
position: absolute;
top: 20px;
left: 360px;
color: blue;
}
/*
有父元素不過父元素沒有定位
*/
#absolute2{
position: absolute;
top: 50px;
left: 360px;
color: blue;
}
/*屬性和上面一樣
不過是父元素定位方式變為 relative
*/
#absolute3{
position: absolute;
top: 50px;
left: 360px;
color: blue;
}
/*相對于瀏覽器窗口來對元素進行定位*/
#fixed{
position: fixed;
top: 90px;
left: 80px;
}
/*float定位受當前布局影響，也會影響伺候布局
比如在普通定位1下行才開始進行浮動
普通定位2 直接就接在浮動定位后面
*/
#float1{
float: left;
margin-left: 50px;
}
#float2{
float: left;
margin-left: 50px;
}
</style>
</head>
<body style='height: 1000px;'>
<div>
position 值為relative 定位探索1
</div>
<div id='relative'>
position 值為relative 定位探索2
</div>
<div>
position 值為absolute 定位探索3
</div>
<div id='absolute1'>
position 值為absolute 定位探索4
</div>
<div style='margin-top: 50px;'>
這是position 值為absolute 定位探索4和5的父元素
<div id='absolute2'>
position 值為absolute 定位探索4
</div>
<div>
position 值為absolute 定位探索5
</div>
</div>
<div style='margin-top: 50px;position: relative;'>
這是position 值為absolute 定位探索6和7的父元素
<div id='absolute3'>
position 值為absolute 定位探索6
</div>
<div>
position 值為absolute 定位探索7
</div>
</div>
<div style='margin-top: 20px;'>
這是position值為fixed 定位探索1
</div>
<div id='fixed'>
這是position值為fixed 定位探索2
</div>
<div>這是一個普通定位1</div>
<div style='border: 2px solid red;' id='float1'>這是float定位1</div>
<div id='float2' style='border: 2px solid red;'>這是float定位2</div>
<div>這是一個普通定位2</div>
</body>
</html>

上一篇：CSS設置DIV背景色漸變顯示兼容IE/火狐/谷歌

下一篇：css3中background新增的4個新的相關屬性用法介紹

發表評論

共有條評論