css position属性
生活随笔
收集整理的這篇文章主要介紹了
css position属性
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
position 屬性規(guī)定元素的定位類型。
主要屬性有:static,fixed,relative,absolute ,下面一一來說明下
static:默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 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>
效果圖
設(shè)置了top,left 并沒有起到作用,也就是它忽略這些屬性,元素依然在正常的流中
?
fixed?固定位置
fixed定位是指元素的位置相對于瀏覽器窗口是固定位置,對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現(xiàn)滾動條時，對象不會隨著滾動。
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定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間，且它會和其他元素發(fā)生重疊。
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，絕對定位
位置被設(shè)置為absolute后，被設(shè)置的元素會被定義到包含它的元素內(nèi)的指定坐標（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>。
?若果設(shè)置right=0 那么它方塊就會靠右邊,以為定位是html?
?
總結(jié)
以上是生活随笔為你收集整理的css position属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 宫外孕再次备孕前检查
- 下一篇： “皇恩只许住三年”上一句是什么