I am trying to place two elements, which are inside a container that has the property display: flex
; but I don't get it, and I don't know if it can.
I have been testing with the property opacity
and with z-index
. But nothing at all.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
#div2 {
width: 250px;
height: 250px;
background-color: gold;
border: 1px solid #333;
border-radius: 20px;
}
<body class="flex-container">
<div id="div1"></div>
<div id="div2"></div>
</body>
All you would need to do is tell your
.flex-container
main axis to change from being the X axis to becoming the Y axis . You can do this using theflex-direction: column
.Edit:
Rereading the question I think what you wanted was to put
<div class='div2'>
the inside of<div class='div1'>
. To do this you can make the parent container of both<div>
have aposition: relative
to make reference to<div class='div2'>
when you put aposition: absolute
.Absolute positioning takes an element out of the normal flow of the page, which among other things causes that element to not take into account the rest of the elements nor do they take it into account. This way you can make one element stand on top of another.