Position Relative vs Absolute?
Absolute CSS Positioning
position: absolute;
Absolute positioning is the easiest to understand. You start with the CSS position
property:
position: absolute;
This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.
If you want to position an element 10 pixels from the top of the document window, you would use the top
offset to position
it there with absolute
positioning:
position: absolute;
top: 10px;
This element will then always display 10px
from the top of the page regardless of what content passes through, under or over the element (visually).
The four positioning properties are:
top
right
bottom
left
To use them, you need to think of them as offset properties. In other words, an element positioned right: 2px
is not moved right 2px
. It's right side is offset from the right side of the window (or its position overriding parent) by 2px
. The same is true for the other three.
Relative Positioning
position: relative;
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.
For example, if you have three paragraphs on your Web page, and the third has a position: relative
style placed on it, its position will be offset based on its current location-- not from the original sides of the view port.
Paragraph 1.
Paragraph 2.
Paragraph 3.In the above example, the third paragraph will be positioned3em
from the left side of the container element, but will still be below the first two paragraphs. It would remain in the normal flow of the document, and just be offset slightly. If you changed it to position: absolute;
, anything following it would display on top of it, because it would no longer be in the normal flow of the document.Notes:
the default
width
of an element that is absolutely positioned is the width of the content within it, unlike an element that is relatively positioned where it's defaultwidth
is100%
of the space it can fill.You can have elements that overlap with absolutely positioned elements, whereas you cannot do this with relatively positioned elements (natively i.e without the use of negative margins/positioning)
lots pulled from: this resource
CSS position relative and absolute
relative
positioning keeps elements on the page so their position is affected by other static
and relative
positioned elements. If you want the black box to be positioned relative to the yellow box, you want to make the black box position: absolute
. An absolute
ly positioned element will be positioned relative to it's closest non-static
positioned ancestor.
<!DOCTYPE html><html>
<head> <title></title></head>
<body> <div style="position: absolute;left:100px;top: 100px;height:600px;background-color: yellow;width: 600px;"> <div style="position:relative;left:100px;top:100px;height:200px;width:500px;background-color: red;"> </div> <div style="position:absolute;left:100px;top:50px;height:10px;width:10px;background-color: black;"> </div> </div></body>
</html>
Using z-index with relative and absolute positioning
I doubt this is exactly what you want to achieve, but it should be a good starting point. There is a few issues with your CSS. I will cover a few of them.
text-align: centre;
should be text-align: center;
. Although that only works with inline and inline-block elements.
There is no such thing as position:center-left;
. The posititon CSS property online accepts static|absolute|fixed|relative|sticky|initial|inherit
.
You should use position:absolute
when you want to position elements on top of one another or just to position it outisde of the document flow.
position:relative;
is used on a parent element of an element with position:absolute
. The absolute positioned element would then position itself relative to that parent element. Adjustments to the position absolute element can be done with top,right,bottom,left
CSS properties.
Look in to the CSS styles of height:0;padding-bottom:75%
. Varying the padding bottom allows you to retain a divs aspect ratio when scaled.
.container { width:80%; position:relative; height:0; padding-bottom:75%;}.fire, .snow, .container img { width:100%; position: absolute; top:0; left:0; right: 0;}.snow { z-index:1;}.fire { z-index:2;}.container img { z-index:3; max-width:100%; height:auto;}
<div class="container"> <img src="https://i.postimg.cc/qByLfxBJ/pic3.png"> <video class="snow" autoplay controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <video class="fire" autoplay controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video></div>
Position Relative & Absolute in Sections - Relative Sections Interfere with each other?
You could do this with a flexbox and some minor alterations to your right/left classes.
I attached a .left
and .right
class to your .content-wrapper
s to indicate position to help reduce the style rules and offer a cleaner approach. Hope this helps you out!
Example
.message-wrapper { margin-bottom: 10px; position: relative; display: flex;}
.message-wrapper.left { flex-direction: row;}
.message-wrapper.right { flex-direction: row-reverse;}
.profile-image { width: 40px; height: 40px; border-radius: 30px;}
.profile-image-section { margin: 0 10px;}
.message-content { background: black; max-width: 500px; padding: 9px; color: #fff;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /><div class="card"> <div class="message-wrapper left"> <span class="profile-image-section"> <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png"> </span> <div class="message-content"> askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf </div> </div> <div class="message-wrapper right"> <span class="profile-image-section"> <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png"> </span> <div class="message-content"> askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf </div> </div> <div class="message-wrapper left"> <span class="profile-image-section"> <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png"> </span> <div class="message-content"> askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf </div> </div></div>
I don't understand absolute and relative positioning in CSS
Absolute positioning means that the element is taken completely out of the normal flow of the page layout. As far as the rest of the elements on the page are concerned, the absolutely positioned element simply doesn't exist. The element itself is then drawn separately, sort of "on top" of everything else, at the position you specify using the left, right, top and bottom attributes.
Using the position you specify with these attributes, the element is then placed at that position within it's last ancestor element which has a position attribute of anything other than static (static is the positioning elements use if they have no position attribute specified), or the document body (browser viewport) if no such ancestor exists.
For example, if I had this code:
<body>
<div style="position:absolute; left: 20px; top: 20px;"></div>
</body>...then the <div> would be positioned 20 px from the top of the browser viewport, and 20px from the left edge of same.
However, if I did something like this:
<div id="outer" style="position:relative">
<div id="inner" style="position:absolute; left: 20px; top: 20px;"></div>
</div>...
then the inner div would be positioned 20px from the top of the outer div, and 20px from the left edge of same, because the outer div isn't positioned with position:static because we've explicitly set it to use position:relative.
Relative positioning, on the other hand, is just like stating no positioning at all, but the left, right, top and bottom attributes "nudge" the element out of their normal layout. The rest of the elements on the page still get laid out as if the element was in its normal spot though.
For example, if I had this code:
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>...
then all three elements would sit next to each other without overlapping.
If I set the second to use relative positioning, like this:
<span>Span1</span>
<span style="position: relative; left: -5px;">Span2</span>
<span>Span3</span>...
then Span2 would overlap the right side of Span1 by 5px. Span1 and Span3 would sit in exactly the same place as they did in the first example, leaving a 5px gap between the right side of Span2 and the left side of Span3.
Hope that clarifies things a bit
For more details refer to this: http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
This is also a good one : http://sitepoint.refererence.sitepoint.com
CSS relative vs absolute position
If you use position:absolute
but don't set top, left, bottom or right, the element takes the position it would have had in normal flow, even though it is not itself in normal flow, so doesn't affect the position of subsequent elements.
So if you change an element without top, left, bottom or right from absolute to relative it doesn't move, this is it still takes it's place in normal flow, but it is now in normal flow, so subsequent elements will move to take account of its size.
Position relative and absolute
When you have an element with position: absolute
that element is placed relatively to its closest positioned parent. A positioned element is any element with position
different from static
, be it relative
, absolute
or fixed
.
In your case you have a .wrapper
with position: relative
and h1
inside it with position: absolute
, that is why the latter is positioned 60 pixels from the top of its parent.
If you insist of the child element being below the parent, add z-index: -1
to it - http://jsfiddle.net/jt92sedr/4/
This property applies only to positioned elements.
You can check: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Related Topics
How to Make a Div Expand Vertically to Wrap the Content Within It
Make Nested Div Stretch to 100% of Remaining Container Div Height
Child Inside Parent With Min-Height: 100% Not Inheriting Height
In CSS Flexbox, Why Are There No "Justify-Items" and "Justify-Self" Properties
Prevent Content from Expanding Grid Items
Center a Column Using Twitter Bootstrap 3
Bootstrap Dropdown Sub Menu Missing
Text in a Flex Container Doesn't Wrap in Ie11
How to Set Background Image and Opacity in the Same Property
Does Firefox Support Position: Relative on Table Elements
Are Eot, Ttf, and Svg Still Necessary in the Font-Face Declaration
What Is the Opposite of :Hover (On Mouse Leave)
Difference Between a Pseudo-Class and a Pseudo-Element in Css
How to Combine Class and Id in CSS Selector