This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 3 years ago.
In my case an absolutely positioned child element carouselbuttonCntainer is going far some pixels below parent div bgCoverSection when I set it's bottom value as zero.
HTML:
<div class="bgCoverSection" id="homePageSection">
<div id="carouselbuttonCntainer">
<div id="carouselbuttonInnerCntainer">
<input type="radio" class="imageCarouselRadioButton"
name="imageCarouselRadioButton" checked="checked">
<input type="radio" class="imageCarouselRadioButton"
name="imageCarouselRadioButton">
<input type="radio" class="imageCarouselRadioButton"
name="imageCarouselRadioButton">
</div>
</div>
</div>
CSS:
//parent
.bgCoverSection{
height: 614px;
width: 100%;
padding: 0px;
background-color: aqua;
text-align: center;
}
//child
#carouselbuttonCntainer{
position: absolute;
bottom: 0;
left: 50%;
}
.imageCarouselRadioButton{
width: 20px;
height: 20px;
}
In the code above code I set carouselbuttonCntainer bottom to 0, it's bottom doesn't align with bottom of parent bgCoverSection.
But when I set carouselbuttonCntainer top to 0, it's top will align with top of parent bgCoverSection.
You must have to provide position: relative; to parent when ever you use position: absolute;.
In your case please add position:relative to this class .bgCoverSection.
You need to add position: relative to its parent div.
.bgCoverSection{
height: 614px;
width: 100%;
padding: 0px;
background-color: aqua;
text-align: center;
position: relative;
}
Give the parent position as relative it would-be working
Related
This question already has answers here:
How position absolute and fixed block elements get their dimension?
(2 answers)
Closed 2 years ago.
I have a parent named "container" of size 300px x 120px that encapsulates 2 s namely "redbox" and "greenbox". when I add "position: relative" to the "container" size of child <div>s looks proportionate. however on removing the attribute size of div increases 3 times".
to my knowledge position is for positioning of elements how can it effect the size of the element.
#container {
width: 300px;
height: 120px;
/*position: relative;*/
border: solid 1px blue;
}
#redbox,
#greenbox {
border: solid 1px;
width: 60%;
height: 60%;
position: absolute;
}
#redbox {
background-color: red;
left: 0px;
top: 0px;
}
#greenbox {
background-color: rgb(21, 255, 0);
left: 30px;
top: 30px;
opacity: 50%;
}
<head></head>
<body>
<div id="container">
<div id="redbox"></div>
<div id="greenbox"></div>
</div>
</body>
The reason this is happening is because you are using percentages for your width and height. Absolute positioning is relative to the nearest parent that has position: relative If nothing qualifies for that, the parent is the <body> element.
When you set position: relative on the #container, you are changing the size of the relative parent to the red and green boxes. And since you are using percentages, the size of the red and green boxes change accordingly.
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I have a div (child) that is positioned absolute within a parent container (positioned relative). I want this child div to be centered vertically and horizontally within its container both on desktop and mobile, however the child div moves positioning depending on the size of the window. How do apply consistent centered positioning across devices?
HTML
<div class="container">
<div class="child">
</div>
<div class="child-2">
</div>
</div>
CSS
.container {
width: 300px;
height: 300px;
border: solid 1px blue;
position: relative;
}
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
position: absolute;
right: 50%;
left: 50%;
top: 50%;
border-radius: 100%;
}
.child-2 {
border-bottom: solid 1px blue;
width: 300px;
height: 150px;
}
JSFiddle for example - http://jsfiddle.net/hfndkywe/8/
it is always safe to use transform to make the element center, see the following code
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%,-50%);
}
when you use left and right positioning, it is always pushing div from the sides not from the center, so in order to make exactly at center transform is the easy fix.
This question already has answers here:
Why is a div with "position: absolute" not by default relative to the document?
(3 answers)
How does the CSS position on a div affects position of sibling division?
(2 answers)
Closed 4 years ago.
I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.
However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.
I read the mdn docs for this...but perhaps I am not understanding the wording?
Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left.
html, body {
height: 100%;
width: 100%;
}
.container {
height: 500px;
width: 500px;
border: 1px solid black;
position: relative;
}
.box1 {
height: 100px;
width: 100px;
background: blue;
position: relative;
margin: auto;
}
.box2 {
height: 100px;
width: 100px;
background: red;
position: absolute;
margin: auto;
}
<div class='container'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 5 years ago.
I have a quiet simple html structure but I can't figure out what I have to do to place the 8 on top of the 0 without losing the height of the wrapping div.
If I use for example float or absolute position on both spans, the divs height is reduced to 0. If I use a combination of absolute position and float on the second div, I cant manage to properly center the span horizontally in the container.
I hope you can tell me what I'm doing wrong and how I can move the second span on top of the first one while letting the first span determine the height of the wrapping div.
#wrapper {
position: relative;
width: 100%;
text-align: center;
}
#first {
}
#first {
}
<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>
You can center absolutely-positioned elements by using a combination of left: 50% and a negative transform, which will allow you to center the 8 element above the 0:
#wrapper {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
#first, #second {
color: white;
display: block;
}
#first {
background: blue;
height: 50px;
padding: 30px
}
#second {
background: red;
height: 10px;
padding: 10px;
position: absolute;
top: 0;
left:50%;
transform: translateX(-50%);
}
<div id="wrapper">
<span id="first">0</span>
<span id="second">8</span>
</div>
Goal: Get the button element fixed to the bottom of the main element. I tried positioning it's container with relative positioning so it sticks to the bottom:
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
This isn't moving the .wrapper div at all. Ideas?
#import url( "https://necolas.github.io/normalize.css/latest/normalize.css" );
* {
box-sizing: border-box;
}
main {
background-color: #eee;
}
main, input {
padding: 2%;
}
main input {
width: 100%;
margin: 5% 0;
border: 0;
}
.clr-fix::after {
content: "";
display: block;
clear: both;
}
.wrapper {
width: 23%;
margin: 1%;
padding: 2%;
background-color: #ddd;
float: left;
}
/* POSITIONING NOT WORKING. I WANT THIS DIV FIXED TO BOTTOM OF PARENT */
.wrapper:nth-child( 4 ) {
background-color: #bbb;
position: relative;
bottom: 0;
}
<main class="clr-fix">
<div class="wrapper">
<input type="text" value="position:bottom">
<input type="text">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text" value="Isn't working">
<input type="text">
<input type="text">
</div>
<div class="wrapper">
<input type="text">
<input type="text">
<input type="text" value="On 'A button'">
<input type="text">
</div>
<div class="wrapper">
<button>A button</button>
</div>
</main>
Relative positioning is a change in relation to the spot the element is already positioned. So if position: relative, bottom: 0 (or top:0, left:0, right:0, etc) means leave this at the same spot it currently is.
If you want this positioned to the bottom of the element, you need to make the parent element position: relative, and the element you want pinned to the bottom position: absolute (with bottom: 0). Absolutely positioned elements will hop on out of the DOM flow and go instead in relation to it's closest relative parent.
essentially you want:
.wrapper {
position: relative;
}
.wrapper:nth-child(4){
position: absolute;
bottom: 0;
}
Your main style will need a relative position applied to it. As mentioned, you can't position bottom:0 with relative positioning. See if this works for you.
main{
background-color: #eee;
position: relative;
}
.wrapper:nth-child(4) {
background-color: #bbb;
position: absolute;
bottom: 8%;
right: 1%;
}
To make the 4'th wrapper stick to bottom you need to put position: relative; on main and add position: absolute to the 4'th wrapper.
a position: absolute; element is absolutely positioned relatively to it's closest parent which is position: relative; - in your case that would be main which wraps the 4'th wrapper.