Абліцавальныя пытанні г-індэксацыю на абсалютна пазіцыянаваны дзіцяці DIV пры адносна размешчанага бацькоўскага DIV

<!DOCTYPE HTML>

<head>
    <title>Test z-index</title>
    
</head>
<body>
    <div class="div1" >Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
    <div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
</body>
</html>

http://jsfiddle.net/yMcf6/

У мяне ёсць два элемента div1 , якія размешчаныя адносна адзін аднаго.

Унутры першага элемента я паставіў абсалютны элемент div2 . Я хачу паставіць div2 элемент на вяршыні як div1 элементы (усе элементы на сайце).

Праблема заключаецца ў тым, што div2 знаходзіцца на вяршыні першага div1 элемент, але гэта не на верхняй частцы другога div1 элемента.

Як я магу гэта выправіць? Як я магу змяніць свой CSS код?

3

18 адказы

Выдаленне Z-індэкс з .div1 дазволіць .div2 павінен быць размешчаны абсалютна па .div1 элементы.

Праблема ў вас ёсць тое, што кожны .div1 , які размешчаны і мае Z-індэкс: 1 стварае сваю ўласную новы штабелирования кантэкст, якія ня (як вы выявілі) ўзаемадзейнічаюць адзін з адным.

На самай справе, калі вы можаце даць другі .div1 гэта уласны правілы, можна мець:

  • first .div1 z-index:0
  • .div1 z-index:1
  • second .div1 z-index:-1

але гэта працуе толькі з-за адмоўнага Z-індэкс як тыя, якія візуалізуецца/складзеныя пад станоўчымі.

Такім чынам, у маім хуткім прыведзеным вышэй прыкладзе гэта будзе не Праца з:

  • first .div1 z-index:1
  • .div1 z-index:2
  • second .div1 z-index:0

См Пранумараваная спіс у дакументацыі для апісання карціны парадак розных слаёў.

3
дададзена
Не ведаю, што, дзякуй за тлумачэнне ў канцы.
дададзена аўтар Abijeet Patro, крыніца
+1 для кароткае апісанне.
дададзена аўтар A.K, крыніца
Я выдаліў Z-індэкс ад .div1 - мне не трэба яго і пратэставалі яго няправільна. дзякуй вельмі шмат ён працаваў.
дададзена аўтар Cichy, крыніца

Выдаленне Z-індэкс з .div1 дазволіць .div2 павінен быць размешчаны абсалютна па .div1 элементы.

Праблема ў вас ёсць тое, што кожны .div1 , які размешчаны і мае Z-індэкс: 1 стварае сваю ўласную новы штабелирования кантэкст, якія ня (як вы выявілі) ўзаемадзейнічаюць адзін з адным.

На самай справе, калі вы можаце даць другі .div1 гэта уласны правілы, можна мець:

  • first .div1 z-index:0
  • .div1 z-index:1
  • second .div1 z-index:-1

але гэта працуе толькі з-за адмоўнага Z-індэкс як тыя, якія візуалізуецца/складзеныя пад станоўчымі.

Такім чынам, у маім хуткім прыведзеным вышэй прыкладзе гэта будзе не Праца з:

  • first .div1 z-index:1
  • .div1 z-index:2
  • second .div1 z-index:0

См Пранумараваная спіс у дакументацыі для апісання карціны парадак розных слаёў.

3
дададзена
Не ведаю, што, дзякуй за тлумачэнне ў канцы.
дададзена аўтар Abijeet Patro, крыніца
+1 для кароткае апісанне.
дададзена аўтар A.K, крыніца
Я выдаліў Z-індэкс ад .div1 - мне не трэба яго і пратэставалі яго няправільна. дзякуй вельмі шмат ён працаваў.
дададзена аўтар Cichy, крыніца

Выдаленне Z-індэкс з .div1 дазволіць .div2 павінен быць размешчаны абсалютна па .div1 элементы.

Праблема ў вас ёсць тое, што кожны .div1 , які размешчаны і мае Z-індэкс: 1 стварае сваю ўласную новы штабелирования кантэкст, якія ня (як вы выявілі) ўзаемадзейнічаюць адзін з адным.

На самай справе, калі вы можаце даць другі .div1 гэта уласны правілы, можна мець:

  • first .div1 z-index:0
  • .div1 z-index:1
  • second .div1 z-index:-1

але гэта працуе толькі з-за адмоўнага Z-індэкс як тыя, якія візуалізуецца/складзеныя пад станоўчымі.

Такім чынам, у маім хуткім прыведзеным вышэй прыкладзе гэта будзе не Праца з:

  • first .div1 z-index:1
  • .div1 z-index:2
  • second .div1 z-index:0

См Пранумараваная спіс у дакументацыі для апісання карціны парадак розных слаёў.

3
дададзена
Не ведаю, што, дзякуй за тлумачэнне ў канцы.
дададзена аўтар Abijeet Patro, крыніца
+1 для кароткае апісанне.
дададзена аўтар A.K, крыніца
Я выдаліў Z-індэкс ад .div1 - мне не трэба яго і пратэставалі яго няправільна. дзякуй вельмі шмат ён працаваў.
дададзена аўтар Cichy, крыніца

Змешчаны div2 па-за два div1 s, і вам не трэба будзе Z-індэкс .

Як гэта:

http://jsfiddle.net/yMcf6/7/

Я дадаў некаторы дадатак да div2 у скрыпку, каб было ясна, што яго па-над астатніх 2-дзівы.

Your html should look Як гэта:

<div class="div1" >Lorem ipsum ...  Phasellus fermentum in, dolor.</div>
<div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
<div class="div2">This element I want to be on top!</div>
1
дададзена
У гэтым выпадку я не буду мець магчымасць пазіцыянаваць div2 адносна див1. (Увесь сайт будзе мець шмат Div1 і div2 элементаў)
дададзена аўтар Cichy, крыніца

Змешчаны div2 па-за два div1 s, і вам не трэба будзе Z-індэкс .

Як гэта:

http://jsfiddle.net/yMcf6/7/

Я дадаў некаторы дадатак да div2 у скрыпку, каб было ясна, што яго па-над астатніх 2-дзівы.

Your html should look Як гэта:

<div class="div1" >Lorem ipsum ...  Phasellus fermentum in, dolor.</div>
<div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
<div class="div2">This element I want to be on top!</div>
1
дададзена
У гэтым выпадку я не буду мець магчымасць пазіцыянаваць div2 адносна див1. (Увесь сайт будзе мець шмат Div1 і div2 элементаў)
дададзена аўтар Cichy, крыніца

Змешчаны div2 па-за два div1 s, і вам не трэба будзе Z-індэкс .

Як гэта:

http://jsfiddle.net/yMcf6/7/

Я дадаў некаторы дадатак да div2 у скрыпку, каб было ясна, што яго па-над астатніх 2-дзівы.

Your html should look Як гэта:

<div class="div1" >Lorem ipsum ...  Phasellus fermentum in, dolor.</div>
<div class="div1" >Suspendisse a pellentesque dui, non felis.</div>
<div class="div2">This element I want to be on top!</div>
1
дададзена
У гэтым выпадку я не буду мець магчымасць пазіцыянаваць div2 адносна див1. (Увесь сайт будзе мець шмат Div1 і div2 элементаў)
дададзена аўтар Cichy, крыніца

Гэта не можа быць зроблена (з CSS у адзіночку).

Даючы div1 пазіцыя і г-індэкс, неабходна стварыць новы кладкі кантэксту . Такім чынам, div2 знаходзіцца ўсярэдзіне div1 . Кожны Z-індэкс ўнутры div1 мае толькі значэнне ўнутры кантэксту стэка. Другі div1 і div2 знаходзяцца ў розных кантэкстах штабелі, таму ніякіх шанцаў.

Вы павінны выкарыстоўваць JavaScript такім чынам.

  • Move the div2 in the dom hierarchy to the same stacking context as the div1
  • Position it to match the previous position
  • give it the proper z-index
0
дададзена

Гэта не можа быць зроблена (з CSS у адзіночку).

Даючы div1 пазіцыя і г-індэкс, неабходна стварыць новы кладкі кантэксту . Такім чынам, div2 знаходзіцца ўсярэдзіне div1 . Кожны Z-індэкс ўнутры div1 мае толькі значэнне ўнутры кантэксту стэка. Другі div1 і div2 знаходзяцца ў розных кантэкстах штабелі, таму ніякіх шанцаў.

Вы павінны выкарыстоўваць JavaScript такім чынам.

  • Move the div2 in the dom hierarchy to the same stacking context as the div1
  • Position it to match the previous position
  • give it the proper z-index
0
дададзена

Гэта не можа быць зроблена (з CSS у адзіночку).

Даючы div1 пазіцыя і г-індэкс, неабходна стварыць новы кладкі кантэксту . Такім чынам, div2 знаходзіцца ўсярэдзіне div1 . Кожны Z-індэкс ўнутры div1 мае толькі значэнне ўнутры кантэксту стэка. Другі div1 і div2 знаходзяцца ў розных кантэкстах штабелі, таму ніякіх шанцаў.

Вы павінны выкарыстоўваць JavaScript такім чынам.

  • Move the div2 in the dom hierarchy to the same stacking context as the div1
  • Position it to match the previous position
  • give it the proper z-index
0
дададзена

See this fiddle - http://jsfiddle.net/yMcf6/10/

Праблема ў тым, .div1 ўтрымліваюць той жа Z-індэкс. г-індэкс .div2, які з'яўляецца унутраным элементам .div1 не будзе ўплываць на .div2. У гэтым выпадку вам трэба яшчэ адзін дадатковы клас для .div1, паколькі ён утрымлівае іншы элемент.

як гэта -

<div class="div1 has_div2">Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
<div class="div1">Suspendisse a pellentesque dui, non felis.</div>

і CSS:

.div1 {position:relative; z-index:1; margin:10px; background:#eee; }
.div1.has_div2 { z-index:5 }
.div2 {position:absolute; top:14px; z-index:999; background:blue; }

:)

0
дададзена
так, гэта звычка. Для гэтага неабходна ўказаць адпаведны Z-індэкс для верхняй DIV і яшчэ не шлях :)
дададзена аўтар HADI, крыніца
гэта можа здарыцца так, што ў другім див1 можа з'явіцца div2, таму гэта рашэнне не будзе працаваць
дададзена аўтар Cichy, крыніца

See this fiddle - http://jsfiddle.net/yMcf6/10/

Праблема ў тым, .div1 ўтрымліваюць той жа Z-індэкс. г-індэкс .div2, які з'яўляецца унутраным элементам .div1 не будзе ўплываць на .div2. У гэтым выпадку вам трэба яшчэ адзін дадатковы клас для .div1, паколькі ён утрымлівае іншы элемент.

як гэта -

<div class="div1 has_div2">Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
<div class="div1">Suspendisse a pellentesque dui, non felis.</div>

і CSS:

.div1 {position:relative; z-index:1; margin:10px; background:#eee; }
.div1.has_div2 { z-index:5 }
.div2 {position:absolute; top:14px; z-index:999; background:blue; }

:)

0
дададзена
так, гэта звычка. Для гэтага неабходна ўказаць адпаведны Z-індэкс для верхняй DIV і яшчэ не шлях :)
дададзена аўтар HADI, крыніца
гэта можа здарыцца так, што ў другім див1 можа з'явіцца div2, таму гэта рашэнне не будзе працаваць
дададзена аўтар Cichy, крыніца

See this fiddle - http://jsfiddle.net/yMcf6/10/

Праблема ў тым, .div1 ўтрымліваюць той жа Z-індэкс. г-індэкс .div2, які з'яўляецца унутраным элементам .div1 не будзе ўплываць на .div2. У гэтым выпадку вам трэба яшчэ адзін дадатковы клас для .div1, паколькі ён утрымлівае іншы элемент.

як гэта -

<div class="div1 has_div2">Lorem ipsum ... <div class="div2">This element I want to be on top!</div> Phasellus fermentum in, dolor.</div>
<div class="div1">Suspendisse a pellentesque dui, non felis.</div>

і CSS:

.div1 {position:relative; z-index:1; margin:10px; background:#eee; }
.div1.has_div2 { z-index:5 }
.div2 {position:absolute; top:14px; z-index:999; background:blue; }

:)

0
дададзена
так, гэта звычка. Для гэтага неабходна ўказаць адпаведны Z-індэкс для верхняй DIV і яшчэ не шлях :)
дададзена аўтар HADI, крыніца
гэта можа здарыцца так, што ў другім див1 можа з'явіцца div2, таму гэта рашэнне не будзе працаваць
дададзена аўтар Cichy, крыніца

give div2 instead of top:14px; to top:0px;

Пастаўлю яго над іншай лініяй

0
дададзена

give div2 instead of top:14px; to top:0px;

Пастаўлю яго над іншай лініяй

0
дададзена

give div2 instead of top:14px; to top:0px;

Пастаўлю яго над іншай лініяй

0
дададзена

Такім чынам, вы маеце на ўвазе вы хочаце div2 двойчы з'яўляцца?

адзін раз па кожнаму з див1 ўваходжання.

Ці правільна гэта?

0
дададзена

Такім чынам, вы маеце на ўвазе вы хочаце div2 двойчы з'яўляцца?

адзін раз па кожнаму з див1 ўваходжання.

Ці правільна гэта?

0
дададзена

Такім чынам, вы маеце на ўвазе вы хочаце div2 двойчы з'яўляцца?

адзін раз па кожнаму з див1 ўваходжання.

Ці правільна гэта?

0
дададзена