I am curious how works position: relative in html tag. Can anyone explain? Is it positioned relative to document object or something like this?
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned).
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
Source: https://www.w3schools.com/css/css_positioning.asp
Actually it won't make any sense if you use position relative with html tag.
position: relative;
positions the child with respect to its parent or to its neighboring elements.
You can try position: relative with body to position the body relative to the parent html.
Let me know if you require any further help
Related
I don't know if is possible through CSS only to have one absolute footer under a relative element - being the relative one different in height due to the nature of it: either change of content or responsiveness. My HTML (using Angular 5):
<main>
<app-navbar></app-navbar>
<div class="content-container" [#fadeAnimation]="routeTransition(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
<app-footer></app-footer>
</main>
The reason why I want to have that is because the relative element contains the view of the user and I'm using angular animations which happen to "require" the elements that get displayed being absolute positioned in order to get the desired visualisation.
The problem with that is that for large elements I am having issues because the footer which is also absolute, does overlap the actual content if that makes sense.
I want to have a "sticky footer" at the bottom of the page so that it has absolute configuration etc (app-footer will render footer):
footer{
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
My CSS:
main{
padding-top: 10px;
padding-bottom: 100px;
}
.content-container{
position: relative;
}
/deep/ router-outlet~* {
position: absolute;
width: 100%;
height: 100%;
}
That was working fine till I added the relative to the .content-container to have the absolute position to the inner element.
A possible workaround I came across was to give a fixed height to the .content-container class and do the different resolutions so I can push down the footer. However I don't think that's possibly the best approach. I'm using Angular 4 if that's of any help. I also had a look at How to position element below relative positioned element without overlapping? but again, the suggested solution was to do with hardcoding the height.
UPDATE 1: I have updated the question with more detailed info. Hope it is now clear.
UPDATE 2: Plunker: https://plnkr.co/edit/FHhncrGBcO9jaNRiUfJQ?p=preview
Parent:
position: relative;
Child:
position: absolute;
z-index: 2;
top: 100%;
If I understood your problem, you need to set a position: relative and a z-index to your .content-container.
Keep in mind that the z-index and the absolute positioning refers to the next relative parent. This is the body by default, but it could be a div with a position: relative in-between.
.content-container{
position: relative;
z-index: 2;
background-color: rgba(180,100,50,.7);
padding: 85px 20px;
}
footer{
position: absolute;
bottom: 0;
z-index: 1;
background-color: pink;
padding: 20px;
}
<main>
<div class="content-container">
content
</div>
<footer>footer</footer>
</main>
I would suggest to use position:fixed for your footer.
For example:
footer{
position: fixed;
right: 0;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem;
}
"fixed" means: relative to the view-port (and not relative to the nearest element with a position)
If I understand you, use a z-index
footer {z-index:0;}
.content-container {z-index:1;}
Currently your looks like this:
content-container is a div. It has explicitly set relative position to the document, since there is no node above with position: relative
after content-container there is a footer with position: absolute. Since there is no node with relative position above, it is absolute to the document
Based on what you write, footer overlaps content. And this is true. Because content-container and footer are positioned to the document, so are on the same level. That means they are rendered based on the document order:
Content container is rendered
Footer is rendered
Since that said, because footer is rendered last, it will overlap content container content.
To fix it you need to make sure footer will be rendered before content, or make sure whatever order they are rendered, footer will be rendered above.
To change rendering order you can just reposition container-content in the HTML code and place it after footer div.
But this is a fragile and troublesome solution.
There is fortunately a solution to this problem. You can explicitly indicate on what layer of rendering element should be. To do this you need to use z-index CSS property.
footer {
z-index: 1;
}
It tells browser that footer shoud be rendered above, way above other content elements.
Default value of z-index is auto. It translates to a value of 0. So if we set z-index to 1, node will be rendered above other elements on equal level without z-index being set.
I'm trying to understand the difference between relative and absolute positions in CSS. I've read the explanations and definitions of both absolute and relative, yet I still find a particular example rather strange. Can someone explain why in the following example :
Here's the HTML file :
body {
display: block;
}
.d1 {
margin-top: 100px;
position: relative;
width: 100px;
height: 100px;
background: #815BFF;
}
.d2 {
position: absolute;
margin-left: 100px;
width: 100px;
height: 100px;
background: #815BFF;
}
.d3 {
position: absolute;
margin-top: 100px;
margin-left: 200px;
width: 100px;
height: 100px;
background: #815BFF;
}
<body>
<div class="d1">div 1</div>
<div class="d2">div 2</div>
<div class="d3">div 3</div>
</body>
I've posted the example on http://codepen.io/l7uci/pen/JWNrRj.
If I change the position of any div from absolute to relative, why does the div itself not change, but all the divs that come after it take it as a reference and change according to it ? I was expecting the other divs to still be placed relative to the body, as in Difference between relative and absolute .
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.
-An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
-An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I want to move a child element to the bottom of its parent via absolute positioning.
Ie The parent will finish and then the element will appear directly after. ie the Parents bottom margin will be aligned with the childs top margin.
I have somewhat achieved this via padding however I don't see how to make this work when the child's size is changeable? ie I have a hardcoded padding size.
<body>
<footer class="footer">
<p> I am the footer </p>
<div class="after">
<h2> I want to appear after the footer</h2>
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"/>
</div>
<h3> I should be in the footer</h3>
</footer>
</body
css ->
.footer {
position: relative;
left: 30px;
padding-bottom: 500px;
}
.after {
position: absolute;
bottom: 0px;
left: 0px;
}
codepen -> http://codepen.io/ianw92/pen/pvXYeV
Absolutely positioned elements are removed from the normal flow. By definition, they therefore won't take other elements into consideration when being positioned. As you are seeing, you would need to hardcode some value.
I'd suggest avoiding absolute positioning and using a flexbox solution to change the order of the elements:
Updated Example
.footer {
display: flex;
flex-direction: column;
}
.footer .after {
order: 3;
}
In this example:
html
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount"><p>Earth</p></div>
</div>
</div>
css
#inboxHeader{
background-color:yellow;
height :300px;
position: relative;
}
#inboxCount{
position: absolute;
bottom: 0;
float:right;
}
Earth is in the bottom left corner. So how can I shift it to the bottom right corner?
Set right:0 instead of float:right
http://jsfiddle.net/8np2f/4/
As it's an absolutely positioned element change float:right; for right: 0px;
If it was positioned relatively then you would need to float it to the right however absolute positioning removes the element from the flow of the DOM.
One caveat however, make sure the parent element has it's position set either to relative or absolute as required, or the child element could position itself against the highest in the DOM tree that has a position set.
float-ing has no effect on absolute-ly positioned elements. Set the right attribute instead.
So, change this:
#inboxCount{
position: absolute;
bottom: 0;
float:right;
}
To this:
#inboxCount{
position: absolute;
bottom: 0px;
right: 0px;
}
HTML
<div style="width:50%;overflow:hidden">
<div id="inboxHeader">
<div id="inboxCount">
<p>Earth</p>
</div>
</div>
</div>
CSS
#inboxHeader {
background-color:yellow;
height :300px;
position: relative;
}
#inboxCount {
position: absolute;
bottom: 0;
right: 0; /* No need for float:right with absolute positioning */
}
I've update your Demo
You must add the rule right: 0 in the id inboxCount.
Here's an example: http://zip.net/brmZth
Hope this helps
Just posting a descriptive answer so it might help someone.
position property can be used to tackle this problem
<div id="outer" style="width: 400px; height: 400px; border: 1px solid red; position: relative">
<div id="inner" style="width: 200px; height: 200px; border: 2px solid yellow; right:0;bottom:0;position:absolute;">
</div>
jsfiddle to check a DEMO
If we set relative positioning on 'outer' div, any elements within 'outer' div will be positioned relative to 'outer' div. Then if we set absolute positioning on 'inner' div, we can move it to the bottom right of 'outer' div using 'right' and 'bottom' properties.
Relative :
If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.
What it really means is "relative to itself". If you set position: relative; on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it's positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be.
Absolute : When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. And a type of positioning that allows you to literally place any page element exactly where you want it.
Any element that is a child of the relatively positioned element can be absolutely positioned within that block.
References :
http://www.barelyfitz.com/screencast/html-training/css/positioning/
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
I have a wrapper class that contains all the content on the web page. the problem is if the content is absolutely placed, it eats my footer. I have to place the content as absolute positioned.
It seems like the footer doesnot recognize that the content is absolute. Heres my code
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<img src="activity/Chrysanthemum.jpg" style="z-index: 1; position:absolute; width: 420px; height: 400px; left: 100px;top:260px; ">
<div class="push">
</div>
</div>
<div class="footer" >copyrights</div>
</body>
If I change the image style by removing the position:absolute property , everything looks normal. so my question is how can we place the footer at the bottom with absolute positioned contents?
Updated answer, regarding comment.
As I mentioned at my previous answer, this effect cannot be achieved using pure CSS. So, I will show the JavaScript approach. Add relevant IDs (see Fiddle), and add the following code at the end of your body. This code snippet will resize your wrapper when necessary.Note: When the page is smaller than the window's height, the page wrapper will still take the full height, because it's not possible to distinguish a height change by an absolutely positioned element.
<script>
(function(){
var wrapper = document.getElementById("wrapper");
var height = document.documentElement.scrollHeight;
wrapper.style.height = height + "px";
})();
</script>
Previous answer:
The issue is caused by the fact that absolutely-positioned elements do not affect the height/width of their parent.
To fix your code, apply the following CSS (only showing relevant CSS, updated postfixed by descriptive comments). Fiddle: http://jsfiddle.net/4ja2V/
html, body {
height: 100%;
width: 100%;
padding: 0; /* Get rid off the padding */
}
.wrapper {
position: relative; /* Necessary to properly deal with absolutely positioned
child elements. */
height: 100%;
margin: 0 auto 4em; /* So that the content is visible when scrolled down*/
}
.footer {
height: 4em;
position: fixed; /* Positions your footer at a fixed position in the window*/
bottom: 0; /* At the bottom of the window*/
}
You were using a negative bottom-margin for .wrapper, which caused the element to "eat" the footer. When you're using absolutely poisitioned inner elements, there's no reliable pure-CSS method to get the real width/height of the .wrapper element. Hence the appearance of position:fixed.
The footer is defined to have a height of 4em. Because the footer is positioned at a fixed position (ie, the element won't move when scrolling down), it's necessary to apply an additional margin at the bottom of the wrapper element.
give your footer a fixed hight and then in your absolute class, do
bottom: heightOfYourFooter + 5px;