css - 定位為absolute的父元素中的子元素 如何設(shè)置在父元素的下面?
問(wèn)題描述
有一個(gè)父元素絕對(duì)定位,它有一個(gè)子元素也是絕對(duì)定位,父元素z-index大于子元素z-index,為何子元素還是在父元素的上面?如何讓這個(gè)子元素放在父元素的下面。鏈接 https://jsfiddle.net/wwxzw10e/
問(wèn)題解答
回答1:謝邀~、這樣的包含關(guān)系就應(yīng)該是這樣的吧
可以考慮換一種方式解決問(wèn)題
兩個(gè)p做同級(jí)、外面包一層父元素、根據(jù)共同的父元素定位、做層級(jí)區(qū)分就好了回答2:
父元素和子元素之間,z-index是無(wú)法對(duì)比的,同級(jí)之間的z-index才能對(duì)比,
比如<p id='test1'><p id='test3'></p></p> 和<p id='test2'></p>同級(jí)test1和test2的z-index能對(duì)比,但是test2和test3的不管怎么樣都無(wú)法對(duì)比,因?yàn)閠est3永遠(yuǎn)在test1上面那層,而test1和test2之間才有對(duì)比性
回答3:父元素不指定 z-index, 而子元素 z-index 為 -1.
但這個(gè)使用場(chǎng)景應(yīng)該是很少的.
回答4:謝邀.
倆元素只有在同一個(gè)父容器里的時(shí)候,由于是在同一個(gè)堆疊上下文里,使用z-index才有意義;父子關(guān)系只會(huì)按照默認(rèn)的子元素一定會(huì)在父元素上邊(不考慮其他奇葩情況)來(lái)渲染。當(dāng)然這也并不是一定沒(méi)轍,還有一種情況元素會(huì)默認(rèn)在上邊,就是它的標(biāo)簽靠下的時(shí)候,類(lèi)似這種:
<p>我在下邊</p><p>我在上邊</p>
所以有時(shí)候把倆標(biāo)簽換個(gè)位置寫(xiě)就好了,z-index更適合出現(xiàn)在“默認(rèn)情況”搞不定的時(shí)候兜底~
以上.
相關(guān)文章:
1. c++ - 如何正確的使用QWebEngineView?2. javascript - js 寫(xiě)一個(gè)正則 提取文本中的數(shù)據(jù)3. WEB-INF / classes /與WEB-INF / lib / *。jar在類(lèi)路徑優(yōu)先級(jí)?4. javascript - 關(guān)于Lazyload遇到的問(wèn)題5. 算法 - python 給定一個(gè)正整數(shù)a和一個(gè)包含任意個(gè)正整數(shù)的 列表 b,求所有<=a 的加法組合6. ruby - gitlab托管,git clone 失敗?7. yii2中restful配置好后在nginx下報(bào)404錯(cuò)誤8. angular.js - react的redux和vue的vuex,angular呢9. java - 我在用Struts2上傳文件時(shí),報(bào)以下錯(cuò)誤怎么回事?10. javascript - 游戲里物體角色層次渲染邏輯和代碼怎么寫(xiě)才好?
