position

時間 2019-11-14

標籤 position 欄目 CSS 简体版

原文原文鏈接

position 屬性指定了元素的定位類型。css

position 屬性的五個值：html

static （靜態定位）
HTML元素的默認值，即沒有定位，元素出如今正常的流中。web

靜態定位的元素不會受到 top, bottom, left, right影響。瀏覽器
```
div.static {
    position: static;
    border: 3px solid #73AD21;
}
```
relative （相對定位）相對定位元素的定位是相對其正常位置.

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

移動相對定位元素，但它本來所佔的空間不會改變spa

h2.pos_top
{
    position:relative;
    top:-50px;
}

fixed （絕對定位）
元素的位置相對於瀏覽器窗口是固定位置。code

即便窗口是滾動的它也不會移動：htm

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

absolute （固定定位）
絕對定位的元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於<html>:

h2
{
    position:absolute;
    left:100px;
    top:150px;
}

sticky (粘性定位)
position: sticky; 基於用戶的滾動位置來定位。blog

粘性定位的元素是依賴於用戶的滾動，在 position:relative 與 position:fixed 定位之間切換。get

它的行爲就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed;，它會固定在目標位置。it

元素定位表現爲在跨越特定閾值前爲相對定位，以後爲固定定位。

這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，纔可以使粘性定位生效。不然其行爲與相對定位相同。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 須要使用 -webkit- prefix (查看如下實例)。
```
div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}
```

相關文章

相關標籤/搜索

binlog+position

position@python

每日一句

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

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<