Place one div under another div in this code sample [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am playing around with this code on codepen and I am trying to place text, under the animated circle and centered in the viewport, but I cannot seem to find a way to do it. I have set background: yellow; on the text for visibility.
If you know why the solution works, it would be immensely helpful if you could explain it here for me to understand/learn.

Answer 1

Try this: https://codepen.io/Lansana/pen/ezvVYR
HTML:
<div class="spinner-wrapper">
<div class='spinner'>
<div class='quadrant'></div>
<div class='quadrant'></div>
<div class='quadrant'></div>
<div class='quadrant'></div>
</div>
<div class='text'>test</div>
</div>
CSS:
html,
body {
height: 90%;
}
body {
background: #c2c2c2;
display: flex;
align-items: center;
justify-content: center;
}
.text {
background: yellow;
text-align: center;
}
.spinner-wrapper {
width: auto;
height: auto;
position: relative;
}
.spinner {
width: 300px;
height: 300px;
min-width: 300px;
position: relative;
animation: spin 60s linear infinite;
//border-radius: 300px;
.quadrant {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
//z-index: 10;
mix-blend-mode: multiply;
//opacity: .5;
&:after {
content: "";
color: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
}
&:nth-child(1) {
animation: slide_horiz_neg 12s linear alternate infinite;
&:after {
//mix-blend-mode: multiply;
//opacity: .5;
background: cyan;
}
}
&:nth-child(2) {
animation: slide_vert_neg 8s linear alternate infinite;
&:after {
//mix-blend-mode: multiply;
//opacity: .5;
background: yellow;
}
}
&:nth-child(3) {
animation: slide_horiz_pos 10s linear alternate infinite;
&:after {
//mix-blend-mode: multiply;
//opacity: .5;
background: magenta;
}
}
/* &:nth-child(4) {
// animation: slide_vert_pos 3.5s linear alternate infinite;
&:after {
mix-blend-mode: normal;
//opacity: .5;
background: #000000;
}
} */
}
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
#keyframes slide_vert_pos {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(1%);
}
}
#keyframes slide_vert_neg {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-1%);
}
}
#keyframes slide_horiz_pos {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(1%);
}
}
#keyframes slide_horiz_neg {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-1%);
}
}
I created a wrapper, which contains your spinner and the text.
The wrapper has an auto height/width, based on it's child elements.
The text can be positioned any way you want within that wrapper, and it is not effected at all by the spinner except for the order in which the two are placed within the dom.

Answer 2

if you use flex, then apply it on HTML so body can shrink on content. margin-left:-50%; will be efficient and can be used to center one element.
For vertical-align, you may use (either) display : inline-block/inline-table + vertical-align:middle in order to center 2 elements being side by sides.
basicly, your CSS template can become
html {
height: 90%;
background: #c2c2c2;
display: flex;
align-items: center;
justify-content: center;
}
body {margin:0;}
.text {
background: yellow;
display: inline-table;/* or inline-block to vertical align */
vertical-align: middle;
margin-left: -50%;/* body flex-child takes width of content, not window ;) */
position: relative;/* bring it up front , add z-index too if needed */
}
.spinner {
display: inline-block;/* not a flex-child anymore & float doesn't allow vertical-align */
vertical-align: middle;/* says itself */
width: 300px;
height: 300px;
min-width: 300px;
position: relative;
animation: spin 60s linear infinite;
}
... and render -> https://codepen.io/anon/pen/qNrxPQ

Answer 3

Modified your code you can have look at codepen
https://codepen.io/anon/pen/KMWZOM
HTML
<div class="wrapper">
<div class='spinner'>
<div class='quadrant'></div>
<div class='quadrant'></div>
<div class='quadrant'></div>
<div class='quadrant'></div>
</div>
<div class='text'>test</div>
</div>
CSS
html,
body {
height: 90%;
}
.wrapper{
position:relative;
margin:0 auto;
}
body {
background: #c2c2c2;
display: flex;
align-items: center;
justify-content: center;
}
.text {
position: absolute;
background: yellow;
top:50%;
left:50%;
}
.spinner {
width: 300px;
height: 300px;
min-width: 300px;
position: relative;
animation: spin 60s linear infinite;
//border-radius: 300px;
.quadrant {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
//z-index: 10;
mix-blend-mode: multiply;
//opacity: .5;
&:after {
content: "";
color: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
}
&:nth-child(1) {
animation: slide_horiz_neg 12s linear alternate infinite;
&:after {
//mix-blend-mode: multiply;
//opacity: .5;
background: cyan;
}
}
&:nth-child(2) {
animation: slide_vert_neg 8s linear alternate infinite;
&:after {
//mix-blend-mode: multiply;
//opacity: .5;
background: yellow;
}
}
&:nth-child(3) {
animation: slide_horiz_pos 10s linear alternate infinite;
&:after {
//mix-blend-mode: multiply;
//opacity: .5;
background: magenta;
}
}
/* &:nth-child(4) {
// animation: slide_vert_pos 3.5s linear alternate infinite;
&:after {
mix-blend-mode: normal;
//opacity: .5;
background: #000000;
}
} */
}
}
#keyframes spin {
to {
transform: rotate(360deg);
}
}
#keyframes slide_vert_pos {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(1%);
}
}
#keyframes slide_vert_neg {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-1%);
}
}
#keyframes slide_horiz_pos {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(1%);
}
}
#keyframes slide_horiz_neg {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-1%);
}
}

Answer 4

You can also try this:
.text {
position: relative;
background: yellow;
right: 150px;
top: 200px;
}
Since your spinner's circumference was 300px, to center it directly below, I divided it by half and assigned that position to the text to center it as well as any number above 150px in order to settle below the circle. Remember, these positions act inverted. Right moves it left and so on.