css Position定位屬性與層級關係

今天同事發現乙個有意思的問題，關於position的層級關係的，他要不說我也沒注意過

測試後果然有趣，有待深入研究：

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>css中position定位屬性與層級關係
title
>
6<
style 
type
="text/css"
>7#w
10.a
11#addtr
12style
>
13head
>
14<
body
>
15<
div 
id="w"
>
16<
div 
id="addtr"
>
17<
p>文字
26層級關係
27<
br />
2829 首先是遵循dom的規則，同級的後面居上。<
br />
3031 一般有定位屬性的元素會高於無定位屬性的同級元素。<
br />
3233 都有定位屬性的同級元素，z-index大者居上<
br />
3435 如果是非同級的元素， 則會忽略元素本身z-index，取與對比元素同級的祖先元素的z-index屬性，大者居上<
br />36p
>
37div
>
38body
>
39html
>

乙個博主的回答：

解釋原文：

2017-04-18  15:13:12 end

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...

CSS Position 定位屬性

本篇文章主要介紹元素的position屬性，此屬性可以設定元素在頁面的定位方式。1.介紹 position 介紹position的值以及輔助屬性。2.position 定位方式 介紹position的四種定位方式 絕對 相對 固定 預設。3.總結 position 以示例的方式展示position。...

CSS position 定位 屬性

關於css position，來自mdn的描述 css position屬性用於指定乙個元素在文件中的定位方式。top right bottom left 屬性則決定了該元素的最終位置。然後來看看什麼是文件流 normal flow 下面是 www.w3.org 的描述 normal flowbox...