Укладка элементов в HTML с позициями CSS

Я пытаюсь разместить элементы HTML. Я создал родительский HTML-div с относительным положением и имеет 2 ребенка, один с абсолютной положением (1-й ребенок) и другой с положением по умолчанию (2-й ребенок).Укладка элементов в HTML с позициями CSS

<body> 
     <div id="parent"> 
     <div id="child1"></div> 
     <div id="child2"></div> 
     </div> 
    </body>

CSS-элементов является

#parent { 
    width: 400px; 
    height: 400px; 
    border: 1px solid black; 
    position: relative; 
} 

#child1 { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    top: 0; 
    border: 1px solid red; 
} 

#child2 { 
    width: 300px; 
    height: 300px; 
    border: 1px solid green; 
    /* position: relative; */ 
}

Теперь я добавил слушатель события на child2. Но событие увольняется на элементе с классом «child2» только на части вне «child1». Но когда я меняю положение элемента «child2» на относительное, я получаю событие, запущенное во всем элементе «child2».

В чем причина такого поведения?

var el = document.getElementById("child2"); 
el.addEventListener("click", 
     function() { 
      alert("Hello"); 
     });

Ссылка на JSFiddle является:

http://jsfiddle.net/GS2306/peby5Lgk/

источник

2015-06-15 gauravs

Если вы не определите свойство позиции на #child2 то статичным. Статические divs перекрываются абсолютными и относительными позициями divs, потому что они не имеют z-index. Поэтому вы получаете событие click только на #child2, где оно не перекрывается #child1.

Но когда вы установили #child2 позицию по отношению, то он перекрывает #child1 (как #child2 вставляется после #child1 и оба имеют тот же г-индекс). Следовательно, вы можете получить событие click на целом #child2, так как оно не перекрывается #child1

источник

2015-06-15 18:15:55 bugwheels94

Благодарю вас. Я понимаю это сейчас. – gauravs

Добавление цветов фона к вашим элементам дает понять, почему наблюдается наблюдаемое поведение. Ваш абсолютно позиционирован элемент - #child1 - это «сверху» вашего статически позиционируется element- #child2

var el = document.getElementById("child2"); 
 
el.addEventListener("click", function() { 
 
    alert("Hello"); 
 
});

#parent { 
 
    width: 400px; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
    position: relative; 
 
} 
 
#child1 { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    top: 0; 
 
    opacity:0.8; 
 
    background: #f0f; 
 
    border: 1px solid red; 
 
} 
 
#child2 { 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid green; 
 
    background: #f00; 
 
    /* position: relative; */ 
 
}

<body> 
 
    <div id="parent"> 
 
     <div id="child1"></div> 
 
     <div id="child2"></div> 
 
    </div> 
 
</body>

При изменении выше фрагмент кода, чтобы установить position: relative на #child2 вы увидите, что #child2 сейчас появляется «сверху» #child1.

Спецификация CSS указывает, что позиционированные элементы всегда выглядят выше в порядке укладки, чем элементы, расположенные не по позициям (position: static). Если два элемента расположены и не имеют z-index, указанных в них, их порядок укладки определяется как порядок их окраски (элементы, которые появляются позже в разметке, будут отображаться поверх элементов, которые встречаются ранее в разметке).

источник

2015-06-15 18:24:02 Adam

Спасибо за быстрый ответ. Теперь концепция понятна мне. – gauravs

Укладка элементов в HTML с позициями CSS

ответ

Смежные вопросы