I'm not able to position the dot to the center of the page, does anyone know why? Thanks.
This is my code:
.dot{
height: 10px;
width: 10px;
background: #FFFFFF;
border-radius: 50%;
display: inline-block;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
<span class="dot"</span>
search up positioning in css, and learn all about it.
Put the code position: absolute;
height: 10px;
width: 10px;
background: red;
color: red;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
add code position: absolute
Related
Basically I want to have a title and then behind it a square thats offset. I've tried to do this by positioning absolute my square and then putting behind the title but when I resize the page it goes off position.
I'm trying to achive the shape behind the title in the image example.
What I tried:
.shape {
position: absolute;
width: auto;
height: 30px;
min-height: 30px;
min-width: 30px;
border-radius: 10px;
background-color: rgb(25, 94, 76);
top: 43vh;
left: 28vw;
z-index: -1;
}
.center {
position: absolute;
left: 50%; /*Half width*/
top: 50%; /*Half height*/ translateY(-50%);
-webkit-transform: translateX(-50%)
translateY(-50%);
padding: 20px;
font-size: 1rem;
}
<div class="center">
Resize the page to see the shape go off center
</div>
<div class="shape"></div>
Here is a codepen: https://codepen.io/PhoenixBeatsYT/pen/XWjZLgB
Move the shape inside your text div then adjust to to the top and left.
Minor adjustments are probably necessary for perfect alignment.
.shape {
position: absolute;
width: auto;
height: 30px;
min-height: 30px;
min-width: 30px;
border-radius: 10px;
background-color: rgb(25, 94, 76);
z-index: -1;
top: 0;
left: 0;
}
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 20px;
font-size: 1rem;
}
<div class="center">
Resize the page to see the shape go off center
<div class="shape"></div>
</div>
I am trying to create a popup card, but the card isn't getting vertically aligned. I've used the position: absolute; for positioning but the card is showing down at the bottom.
CSS(SASS)
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Popup is not fully implemented, I was checking where the element would show up.
This code is showing a white box down at the bottom instead of middle. Where I was hoping it to be.
HTML
<div class="popup">
<div class="popup__content">
</div>
</div>
The popup class is direct child of body just so it isn't influenced by any other classes. Anyone see where I might screwed up.
try this:
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
display:flex;
justify-content:center;
align-items:center;
&__content {
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Try using display: flex with justify-content, align-items rather than position: fixed.
It will be a constructive choice for a comfortable future in the future.
Please refer to the following URL through Google Translator. This site is well detailed.
https://heropy.blog/2018/11/24/css-flexible-box/
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/flex
Use position: fixed; also for the child container (&__content). position: absolute; relates to he next higher ancestor with position: relative, so that night not be appropriate in every situation.
.popup {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: red;
z-index: 3000;
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
box-shadow: 0 2rem 4rem green;
border-radius: 3px;
}
<div class="popup">
<div class="popup__content">
</div>
</div>
I'm trying to put two lines (horizontal and vertical one) on top of an image via CSS.
here my code:
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
}
.horizontalLine {
position: absolute;
width: 3px;
top: 0px;
bottom: 0;
left: 50%;
background-color: blue;
transform: rotate(90deg);
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
Unfortunately my result is:
How can I solve this?
thanks
You should add a height to the horizontal line equal to the image width, and then position it in the center with top:50% translateY(-50%).
And also you should add translateX(-50%) to both of them to make them stay in the exact center of the image.
See below
div {
width: 640px;
position: relative;
}
.verticalLine {
display: block;
position: absolute;
background-color: blue;
width: 3px;
top: 0px;
bottom: 0px;
left: 50%;
height: 480px;
transform: translateX(-50%)
}
.horizontalLine {
position: absolute;
width: 3px;
top: 50%;
bottom: 0;
left: 50%;
background-color: blue;
transform: translate(-50%, -50%) rotate(90deg);
height:640px;
}
<div>
<span class="verticalLine"></span>
<span class="horizontalLine"></span>
<img src="http://placehold.it/640x480">
</div>
This question already has answers here:
I have position but z index is not working
(1 answer)
How to get a parent element to appear above child [duplicate]
(7 answers)
Closed 4 years ago.
I have two elements as parent and child and I want to make the child element to go behind the parent element. I try to add z-index:-1 to child element but nothing happens ... can someone guide me on how to make the child go behind parent element.
.parent {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -1;
}
<div class="parent">
parent
<div class="child">child</div>
</div>
The problem here is that when you set a transform property other than none, you define a new stacking context in CSS. Removing this property fixes the issue. 1.
.parent {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
/* transform: translate(-50%, -50%);
*/
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -1;
}
<div class="parent">parent
<div class="child">child</div>
<div>
At this moment, you can't do this. But what you can do is, give the styles of parent to the ::before pseudo element and you can get it done:
.parent {
width: 200px;
height: 200px;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-indent: -99em;
}
.parent::before {
content: 'parent';
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: coral;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -1;
}
<div class="parent">
parent
<div class="child">child</div>
</div>
You can't do that, because the child is wrapped in the parent.
You can only swap parents with parents, and childs with childs. But but not parents with childs!
I would recommend to do stuff like this, like swaping parents with parents, via flex-box order.
Idk if it's allowed to share links but this tutorials here are pretty good and helped me a lot. I'm also a beginner
https://youtu.be/JJSoEo8JSnc
https://www.w3schools.com/css/css3_flexbox.asp
edit Okay you can do that, look at the other answer. But for me it's not a clean way to swap parents with childs. I'd avoid to do it.
Put the parent text in a div also
.parent {
width: 200px;
height: 200px;
color: white;
font-size: 25px;
text-align: center;
line-height: 200px;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent-text {
border-radius: 50%;
background-color: coral;
z-index: 1;
top: 1px;
left: 1px;
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: silver;
z-index: -100;
}
<div class="parent">
<div class="parent-text">parent</div>
<div class="child">child</div>
</div>
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}