css position 属性 (absolute 和fixed 区别)_html/css

Rumah

hujung hadapan web

html tutorial

css position 属性 (absolute 和fixed 区别)_html/css_WEB-ITnose

Jun 24, 2016 am 11:43 AM

在css3中,position的属性值有：inherit, static, relative ,absolute, fixed.

inherit 是继承父元素的position属性值,IE不支持。

static 默认值，元素出现在正常的流中，忽略（TRBL）和z-index的值。请参照下面的例子，div1由于position的值为static，所以top,left 没有起作用.

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        .divPos{            position:static;            left:100px;            top:100px;        }    </style></head><body><div class="divPos">this id div 1(position is static)</div><div class="div2">this is div 2</div></body>

Salin selepas log masuk

　　inherit 和　static差别：在运行过程中，position 如果为static则始终保持不变，如果为inherit则可在运行过程中改变。

relative相对定位，相对于正常文档流的正常位置进行定位。如下面的例子中，一个div 相对于正常位置　偏移100px. 这里有点需要注意，positino设置relative 之后，元素仍保留未定位前的形状，它所占用的空间会保留。就是说，未定位以前，div默认是块级元素(div默认属性)，定位之后依然是块级元素。

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        body{            background-color:#ffff33;        }        .divPos{            position:relative;            left:100px;            top:100px;            background-color:#000fff;        }    </style></head><body><div class="divPos">    The position of this div is relative...</div></body>

Salin selepas log masuk

absolute 生成绝对定位的元素，相对于static以外的第一个父元素进行定位。如下面的例子所示，

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        div{            background-color:#33ff33;        }        .divPos{            position:absolute;            left:50px;            top:50px;        }        .div3{            position:absolute;            left:50px;            top:50px;        }    </style></head><body><div class="divPos">div parent    <div>    <div class="div3">div child 3</div>    </div></div></body>

Salin selepas log masuk

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。如下面的例子，可以滚动右边的滚动条，div 相对于窗口始终在相同的位置。其实，更恰当的例子，是做个购物车。

<!Doctype html><meta charset="utf-8"><head><title>test position static</title>    <style type="text/css">        .divPos{            position:fixed;            left:50px;            top:50px;        }        .div1{            height:1000px;        }    </style></head><body><div class="divPos">    The position of this div is fixed.And this div will be always here.</div><div class="div1"></div></body>

Salin selepas log masuk

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

Tunjukkan Lagi

Tag artikel panas

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7288

Tutorial Java

1622

Tutorial CakePHP

1342

Tutorial Laravel

1259

Tutorial PHP

1206

Tunjukkan Lagi

Related knowledge

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?