當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

css position属性

發布時間：2023/11/27 生活经验 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 css position属性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

position 屬性規定元素的定位類型。

主要屬性有:static,fixed,relative,absolute ,下面一一來說明下

static:默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body{margin: 0;}.main{width: 400px;height: 400px;background: #DD28A0;position: static;top: 80px;left: 80px; }</style><body><div class="main"></div></body>
</html>

效果圖

設置了top,left 并沒有起到作用,也就是它忽略這些屬性,元素依然在正常的流中

fixed?固定位置

　fixed定位是指元素的位置相對于瀏覽器窗口是固定位置,對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。

demo

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body{margin: 0;}.main{width: 40px;height: 40px;background: #DD28A0;position: fixed;top: 80px;left: 80px; }</style><body><div class="main"></div><h1>111111111</h1><h1>111111111</h1><h1>111111111</h1><h1>111111111</h1><h1>111111111</h1><h1>111111111</h1></body>
</html>

效果圖

窗口是滾動的它也不會滾動，且fixed定位使元素的位置與文檔流無關，因此不占據空間，且它會和其他元素發生重疊。

relative 相對定位

生成相對定位的元素，相對于其正常位置進行定位

相對定位會按照元素的原始位置對該元素進行移動

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body{margin: 0;}.main{width: 40px;height: 40px;background: #DD28A0;position: relative;}.main1{width: 40px;height: 40px;background: #00d8a0;position: relative;margin-left: 30px;}</style><body><div class="main">正常的</div><div class="main1"></div></body>
</html>

效果圖

absolute，絕對定位

位置被設置為absolute后，被設置的元素會被定義到包含它的元素內的指定坐標（X坐標、Y坐標）。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>body{margin: 0;}.main{width: 200px;height: 200px;background: #DD28A0;position: absolute;	 }.content{width: 100px;height: 100px;background: #00d8a0;position: absolute;	}.main2{width: 50px;height: 50px;background: black;position: absolute;}</style><body><div class="main"><div class="content"></div></div><div class="main2"></div></body>
</html>

效果圖

絕對定位的元素相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>。

?若果設置right=0 那么它方塊就會靠右邊,以為定位是html?

總結

以上是生活随笔為你收集整理的css position属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。