If you're looking to stack two sibling divs on top of each other, you can achieve this using CSS positioning since they share the same parent.
An example for this setup can be found here. Here's what it involves:
- The HTML consists of a straightforward structure with 2
divs sharing a common parent.
- In the CSS, I assigned width, height, and background properties to both
divs, setting the display property of the first one as none initially.
- I also positioned the hidden
div using position:absolute, which allows me to utilize attributes like bottom, left, right, and top.
Notice that I added position:relative to the parent element. This is crucial because position:absolute positions elements in relation to the closest parent with a position attribute set as relative or absolute.
Next, jQuery library was used to implement the onClick() event which toggles the visibility of the hidden div when the second div is clicked.
- IMPORTANT: Make sure to add the
onClick() event only after the DOM has fully loaded (in the provided jsFiddle, 'DomReady' option is selected, and in jQuery, you have the ready event).
Note: The jQuery part can also be accomplished using pure JavaScript, but using the library is recommended due to its efficiency and widespread use.
Update:
http://jsfiddle.net/GLf4X/5/
HTML:
<div id="parent">
<div id="child1">
</div>
<div id="child2">
</div>
<div id="child3">
</div>
</div>
CSS:
#child1{
width:300px;
height:50px;
background:#333;
display:none;
position:absolute;
bottom:100%;
}
#child2{
width:300px;
height:50px;
background:#666;
margin-bottom:100px;
}
#child3{
width:300px;
height:50px;
background:#999;
}
#parent{
margin:60px auto;
position:relative;
}
Javascript:
function getOffset( el ) {
var offset = { top: 0, left:0 };
if( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
offset.left = el.offsetLeft - el.scrollLeft;
offset.top = el.offsetTop - el.scrollTop;
}
return offset;
}
function displayAboveElement(event){
event.stopPropagation();
var divToShow = document.getElementById('child1'),
clickTarget = event.target;
offset = getOffset(clickTarget);
divToShow.style.display = 'block';
console.log(clickTarget.style);
divToShow.style.top = (offset.top - clickTarget.clientHeight) + 'px';
divToShow.style.left = offset.left + 'px';
}
document.getElementById('child2').onclick = displayAboveElement;
document.getElementById('child3').onclick = displayAboveElement;
Addressing your issue:
- The error occurred because you were attempting to retrieve
left and top values from an element where they haven't been defined yet, resulting in null values.
left and top are specifically applicable to elements styled with position:absolute.- An element's
style reflects inline style attributes only, not what we intend here.
As demonstrated, coding vanilla JavaScript involves several challenges (cross-browser compatibility, etc.), hence utilizing a library like jQuery is highly recommended.
My Solution:
- Determined the relative offset top and left of the clicked element concerning its immediate parent.
- Applied these values as inline styles to the designated
div for display purposes.