css相對定位，絕對定位，static定位
阿新 • • 發佈：2019-01-03
<!--static定位--><!--static 預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。--> <!--支援 padding: margin: float等屬性--> <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>*{ padding: 0;margin: 0; } .mydiv{ /*靜態定位的水平居中*/ /* 1設定定位（一般為預設）position: static; 2設定寬度width: 200px; 3margin: 0 auto 0 auto; */ position: static; width: 200px; margin: 0 auto 0 auto;/*上 右 下 左**/ } .mydiv1{ /*預設的定位static*/ position: static; width: 100px; height: 100px; background-color: #0040D0; float: left; } .mydiv2{ position: static; width: 100px; height: 100px; background-color: #00A000;float: left; } </style></head><body><div class="mydiv"><div class="mydiv1"></div><div class="mydiv2"></div></div></body></html>
<!--絕對定位--><!--生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。（相對於瀏覽器定位）--> <!--元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。--> <!--不支援margin,padding,float屬性--> <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><style type="text/css">*{ padding: 0; margin: 0; } .mydiv1{ background-color: #0040D0; /*預設的定位static*/ width: 100px; height: 100px; /* 水平居中 1 position: absolute;(設定為據對定位) 2 left: 50%;（left: 50%;如果設定成60%.70%。。。會偏移，這要根據實際需要） 3 margin-left: -50px;（設定為寬度的一半，加上負號） */ position: absolute; left: 50%; margin-left: -50px; /* 豎直居中 1 position: absolute;(設定為據對定位) 2 top: 50%;（left: 50%;如果設定成60%.70%。。。會偏移，這要根據實際需要） 3 margin-left: -50px;（設定為高度的一半，加上負號） */ top: 50%; margin-top: -50px; } .mydiv2{ position: absolute; width: 100px; height: 100px; /*距上面200px*/ /*距左邊200px*/ top: 20%; left: 20%; background-color: #219161; } </style></head><body><div class="mydiv1"></div><div class="mydiv2"></div></body></html>
<!DOCTYPE html><!--相對定位--><!--相對定位是一個非常容易掌握的概念。 如果對一個元素進行相對定位， 它將出現在它所在的位置上。 然後， 可以通過設定垂直或水平位置， 讓這個元素“相對於” 它的起點進行移動。--> <html><head><meta charset="utf-8"><style type="text/css">h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; left:20px } </style></head><body><h2>這是位於正常位置的標題</h2><h2 class="pos_left">這個標題相對於其正常位置向左移動</h2><h2 class="pos_right">這個標題相對於其正常位置向右移動</h2><p>相對定位會按照元素的原始位置對該元素進行移動。</p><p>樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。</p><p>樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。</p></body></html>