position定位
position屬性指定了元素定位的類型
position屬性的五個值
static
relative
fixed
absolute
sticky
static定位
HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。靜態(tài)定位的元素不會受到 top, bottom, left, right影響。
<style>
div.lx{
position: static;
background-color: lightblue;
font-size: 20px;
}
</style>
</head>
<body>
<div class="lx">長城（The Great Wall），又稱萬里長城，是中國古代的軍事防御工事</div>
<p>HTML 元素的默認值，即沒有定位，遵循正常的文檔流對象。
靜態(tài)定位的元素不會受到 top, bottom, left, right影響。</p>
</body>
</html>
png
fixed 定位
元素的位置相對于瀏覽器窗口是固定位置，即使窗口是滾動的它也不會移動。
<style>
div.lx{
position: fixed;
top:30px;
right: 20px;
font-size: 15px;
text-align: center;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="lx"><span>長城（The Great Wall），又稱萬里長城</span>
<p>fixed定位元素的位置相對于瀏覽器窗口是固定位置,即使窗口是滾動的它也不會移動</p></div>
<p>長城資源主要分布在河北、北京、天津、山西、陜西</p><p>長城資源主要分布在河北、北京、天津、山西、陜西</p>
<p>長城資源主要分布在河北、北京、天津、山西、陜西</p><p>長城資源主要分布在河北、北京、天津、山西、陜西</p>
<p>長城資源主要分布在河北、北京、天津、山西、陜西</p><p>長城資源主要分布在河北、北京、天津、山西、陜西</p>
<p>長城資源主要分布在河北、北京、天津、山西、陜西</p><p>長城資源主要分布在河北、北京、天津、山西、陜西</p>
</body>
</html>
png
relative 定位
相對定位元素的定位是相對其正常位置。
<style>
div.lx{
position: relative;
left: -40px;
font-size:20px;
background-color: #a6d8a8;
}
div.lx1{
position: relative;
left: 40px;
font-size: 20px;
background-color: #a6d8a8;
}
</style>
</head>
<body>
<h1>這是一個沒有定位的標題</h1>
<div class="lx">在中國悠久的歷史文化傳承中</div><br>
<div class="lx1">在中國悠久的歷史文化傳承中</div>
</body>
</html>
png
absolute 定位
絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>。
<style>
div.lx{
position: absolute;
left: 200px;
top:100px;
}
</style>
</head>
<body>
<h1>這是一個沒有定位的標題</h1>
<div class="lx">
<p>絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html></p>
<p>absolute 定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。定位的元素和其他元素重疊</p>
</div>
</body>
</html>
png
sticky 定位
sticky 英文字面意思是粘，粘貼，所以可以把它稱之為粘性定位。
position: sticky; 基于用戶的滾動位置來定位。
粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。
<style>
div.lx{
position: sticky;
top:2px;
background-color: darkturquoise;
}
</style>
</head>
<body>
<div class="lx">
<h1>sticky 粘性定位</h1>
</div>
<div style="padding-bottom: 1000px">
<p>來回滑動</p><p>來回滑動吧</p><p>快來回滑動</p><p>來回滑動</p>
<p>來回滑動1</p><p>來回滑動2</p><p>來回滑動3</p><p>來回滑動4</p>
<p>來回滑動5</p><p>來回滑動6</p><p>來回滑動7</p><p>來回滑動8</p>
</div>
</body>
</html>
png
重疊的元素
z-index屬性指定了一個元素的堆疊順序（正負數(shù)決定元素放在前面或者后面）。
<style>
img{
position: absolute;
top: 1px;
left: 1px;
z-index: -20;/*負數(shù)決定元素放在后面*/
}
</style>
</head>
<body>
<h1 style="color: hotpink">這是荔波小七孔的風景圖片</h1>
<img src="https://img0.baidu.com/it/u=2115923810,4134479620&fm=26&fmt=auto">
</body>
</html>
png
