CSS Relative + Right (Or Bottom) Almost Never Work

CSS relative + right (or bottom) almost NEVER work

From Absolute vs. Relative - Explaining CSS Positioning

Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.

Position: bottom' not working on relatively positioned button element

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;
}

position: absolute; bottom: 0' does not work when parent position is relative

That's because when you're setting position:relative on main, then position:absolute will be relative to the parent. And your #main div has no height, which causes the #bottom to not be at the bottom of the page.

Is * {position:relative} a bad idea?

Wildcards can cause performance issues when not used carefully. That would probably not be the case in your example, but it's a bad habit to develop.

But more importantly, it's rare that you can conclusively say you want any behavior to apply to all elements.

With relative positioning, you will at best achieve nothing and at worst create many headaches for yourself trying to troubleshoot things that would normally "just work".

Relative positioning definitely has its uses. Apply it when you need it.

Relative positioning + Absolute positioning VS Floats Left an Float Right (Which approach do you use in your CSS)?

I my experience using absolute positioning works well on elements you are in 100% control of in terms of size; like a logo, a meny, rss links and things like this. Then you can place these elements exactly where you want them.

I prefer using float when I am displaying dynamic content on a page, since the size of the element can change, and the placement of all elements in relation works really good with floats. Just remember to clear the floats when needed!

CSS absolute positioning- do I need to specify top, right, bottom AND left?

here , setting all coordonates to zero tells the element to cover the whole parent (positionned).if label is position:relative or fixed or absolute it will cover it .

it is similar to

top:0;
left:0;
height:100%;
width:100%;

But it can have another purpose for element sized, adding margin:auto; will center element into the parent positioned. if there is no parent positionned, then the viewport come the reference.
example

input,div {  position: absolute;  top: 0;  left: 0;  bottom: 0;  right: 0;  text-align: center;  line-height: 2.2em;  margin: auto;}
div {  background: lime;/* show me */}
input {  z-index: 1;/* let me be on top */}

<input type="text" value="i have a defaut size" /><div> well i have size that content, coordonates or height/width ,  shall give me </div>

---

Related Topics