position

時間 2019-11-14

標籤 position 欄目 CSS 简体版

原文原文鏈接

position我稱它爲三部曲css

一部曲；position;顧名思義就是定位它呢有5個屬性值html

值css3	描述瀏覽器
Absolute post	生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。htm 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。繼承
fixed 文檔	生成絕對定位的元素，相對於瀏覽器窗口進行定位。it 元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。io
relative	生成相對定位的元素，相對於其正常位置進行定位。所以，"left:20px" 會向元素的 LEFT 位置添加 20 像素。
Static	默認值。沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
Inherit	繼承父元素

二部曲；說下postion的用法absolute是相對於有相對定位的父元素定位，若是沒有它會逐級查找直達body，下面的盒子是最上面的。它呢是會脫離文檔流的！

fixed是絕對定位生成相對於窗口定位；

三部曲；是定位的層級關係關鍵屬性 z-index ;

z-index；這個屬性只能在 postion屬性下使用默認是 0 或 auto 參數能夠是正整數和負整數 0！

元素的z-index的值越大它的層級就越高下面我拿案例來講明

<html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> /*首先幹掉默認值*/ *{ margin: 0; padding: 0; list-style: none; text-decoration: none; } /*再給每一個盒子寬高邊框和絕對定位*/ div{ width: 200px; height: 200px; border: 1px solid red; position: absolute; } /*而後給每一個盒子不一樣的背景顏色和 left top 的值我用的是css3的僞類選擇器*/ div:nth-of-type(1){ background: blue; z-index: 200; } div:nth-of-type(2){ background: green; left: 22px; z-index: 10; } div:nth-of-type(3){ top: 22px; background: red; z-index: -200; } </style> <body> <div></div>  <div></div> <div></div> </body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。