If you are working with a simple markup structure as shown below, the best approach would likely involve using an absolutely positioned div
With this setup, your popup will be positioned outside the parent, without any restrictions on width/height
In this example, the popup is placed outside the third div, providing more flexibility in choosing its position based on responsiveness (various screen sizes, etc.)
For a script-based solution:
document.querySelector('.click').addEventListener('click', function(e){
e.target.nextElementSibling.classList.toggle('clicked');
})
.parent {
position: relative;
display: flex;
border: 1px solid red;
}
.parent div {
flex: 2;
border: 1px solid lime;
margin: 1px;
}
.parent div:nth-child(2) {
flex: 3;
}
.parent div:nth-child(3) {
flex: 2;
}
.parent .popup {
display: none;
position: absolute;
right: -2px;
top: calc(100% + 3px);
border: 1px solid blue;
}
.parent .popup.clicked {
display: block;
}
<div class="parent">
<div> 1 </div>
<div> 2 </div>
<div class="click"> 3 <br> (click to toggle) </div>
<div class="popup"> This one can have text <br>
that does pretty much what you want
</div>
</div>
Alternatively, this can be achieved without any script by utilizing a label and a checkbox
Updated Version
The popup will close when clicking anywhere on the page (Credits to I Love CSS)
.parent {
position: relative;
display: flex;
border: 1px solid red;
}
.parent div {
flex: 2;
border: 1px solid lime;
margin: 1px;
}
.parent div:nth-child(2) {
flex: 3;
}
.parent div:nth-child(3) {
flex: 2;
}
.parent .popup {
display: none;
position: absolute;
right: -2px;
top: calc(100% + 3px);
border: 1px solid blue;
}
.parent .modal {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: white;
opacity: 0.3;
}
.parent .click label[for=chkbox] {
display: block;
}
#chkbox {
display: none;
}
#chkbox:checked ~ .modal,
#chkbox:checked ~ .popup {
display: block;
}
<div class="parent">
<div> 1 </div>
<div> 2 </div>
<div class="click"><label for="chkbox"> 3 <br> (click to toggle) </label></div>
<input type="checkbox" id="chkbox">
<label class="modal" for="chkbox"></label>
<div class="popup"> This one can have text <br>
that does pretty much what you want
</div>
</div>
Another script-less approach is implementing :focus
Updated Version
The popup will persist using :hover, allowing links to function as well (Credits to Andrei Gheorghiu)
.parent {
position: relative;
display: flex;
border: 1px solid red;
}
.parent div {
flex: 2;
border: 1px solid lime;
margin: 1px;
}
.parent div:nth-child(2) {
flex: 3;
}
.parent div:nth-child(3) {
flex: 2;
}
.parent .popup {
display: none;
position: absolute;
right: -2px;
top: calc(100% + 3px);
border: 1px solid blue;
}
.click:focus + .popup {
display: block;
}
.click + .popup:hover {
display: block;
}
<div class="parent">
<div> 1 </div>
<div> 2 </div>
<div class="click" tabindex="-1"> 3 <br> (click to toggle) </div>
<div class="popup"> This one can have text <br>
that does pretty much what you want <br><br>
<a href="#" onclick="alert('hey');">links included</a>
</div>
</div>