CSS中Position幾種屬性的總結

2022-08-11 06:09:09 字數 1045 閱讀 2806

定位position

定位方向:left  right  top  bottom

靜態定位:static  預設值,就是文件流

絕對定位:absolute

特點:

1.不佔據原來的位置(脫標)

2. 元素使用絕對定位,位置是從瀏覽器出發的  bottom:100px;則元素距瀏覽器底部100px;

3.巢狀的盒子,父盒子沒有使用定位,子盒子絕對定位,子盒子位置從瀏覽器出發

4.巢狀的盒子,父盒子使用相對定位,子盒子絕對定位,子盒子位置從父元素出發

5.給行內元素使用絕對定位之後,轉換為行內塊(不推薦使用)

調整元素的層疊順序,預設值0-999

相對定位:relative

特點:

1.使用相對定位,位置從自身出發

2.還佔據原來的位置

3:子絕父相

4.行內元素使用相對定位不能轉行內塊

固定定位:fixed

特點:

1.固定定位之後,不佔據原來的位置(脫標)

2.元素使用固定定位之後,位置從瀏覽器出發

3.元素使用固定定位之後,會轉化為行內塊(不推薦使用)

CSS中Position幾種屬性的總結

定位position 定位方向 left right top bottom 靜態定位 static 預設值,就是文件流 絕對定位 absolute 特點 1.不佔據原來的位置 脫標 2.元素使用絕對定位,位置是從瀏覽器出發的 bottom 100px 則元素距瀏覽器底部100px 3.巢狀的盒子,父...

CSS 的幾種 position 定位

1 static 靜態定位,所有標準文件流中的元素預設值。該關鍵字指定元素使用正常的布局行為,即元素在文件常規流中當前的布局位置。此時 top right bottom left 屬性無效。2 relative 相對定位,上浮但不脫離標準文件流。該關鍵字指定元素會相對於自身標準文件流中的位置進行相應...

定位上下文(補充css的position屬性)

把元素的position屬性設定為relative absolute或fixed後,繼而可以使用trbl屬性,相對於另乙個元素移動該元素的位置。這裡的 另乙個元素 就是該元素的定位上下文。絕對定位元素的預設上下文是body。然而絕對定位元素的任何祖先元素都可以成為它的定位上下文,只要把相應的祖先元素...