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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.