I need to give an element position fixed, but I can't position it relatively to the viewport, I need it to be positioned relatively to a container.
I managed to do so, but I wonder how and why it works, because actually I think position fixed is ALWAYS positioned relatively to the viewport and NOT to parent elements.
Here my (working) code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
height: 2000px;
}
.container {
position: relative;
}
.sidebar {
width: 200px;
background-color: red;
height: 200px;
position: absolute;
left: 100px;
top: 100px;
}
.fixed {
width: 100px;
height: 100px;
background-color: green;
position: fixed;
/* top: 0;
left: 0; */
margin-left: 10px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<div class="fixed"></div>
</div>
</div>
</body>
</html>
Fiddle: https://jsfiddle.net/tnwLycao/
Element "fixed" can easily be positioned with margins (e.g. margin-left/margin-top). However, when I deactivate the margins and try to position "fixed" with top/left it positions itself relatively to the viewport again, not relatively to the parent container/element.
Can someone give me a hint how and why this works?
An element with position: fixed is indeed positioned relative to the viewport (or browser). However, because it is an absolutely positioned element, it is "positioned relative to the initial containing block established by the viewport".
This is laid out in the position documentation:
An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset.
That is to say, when you specify margin-top and margin-left, these values are relative to the parent. And because the element is positioned relative to the parent, the default top and left are inherited from the parent. In your example, the .fixed element has a top value of 100px because it inherits the top value of 100px from .sidebar (the parent). When you set top: 0 on .fixed, you are overriding this value (going from top: 108px to top: 0):
Because of this, the element appears to be taken 'out of flow'. However, it is still always positioned relative to the viewport; it just had an initial offset (which it inherited from its parent).
Related
In the given code, in div.text section when I assign position: absolute then the display: block property becomes inactive and I have to set width: 100% to align the text in the center. What's the reason?
Why do I have to first set the position property to relative of the container in order to set the position of the child element to absolute? If I don't set the position: relative of the parent container then the element is positioned with respect to the body tag. Why?
body,
html {
height: 100%;
margin: 0;
}
div.first-div {
background-image: url(louis-lo-275893-unsplash.jpg);
height: 100%;
opacity: 0.7;
background-size: cover;
position: relative;
}
div.text {
position: absolute;
top: 45%;
left: 0;
display: block;
width: 100%;
text-align: center;
}
span.border {
color: cornsilk;
font-family: "Lato", sans-serif;
letter-spacing: 8px;
font-size: 50px;
background-color: black;
padding: 8px 30px;
height: 100px;
}
<body>
<div class="first-div">
<div class="text">
<span class="border">Hello</span>
</div>
</div>
</body>
Why do I have to first set the position property...
The default value of the position is static, which displays elements as they appear, or in other words: not positioned. Absolute positioning will place an element relative to its first positioned (not static) ancestor element. If nothing is positioned, the <body> or topmost element is it. That's where the need for setting parent position to relative comes from. Going from static to relative makes it "positioned" and now child object with absolute position will tie to its ancestor and not <body>. from https://www.w3schools.com/cssref/pr_class_position.asp
...I have to set width: 100% to align the text in the center. What's the reason?
When you remove position: absolute style from div.text it does not affect display:block (block, as opposed to inline, means the element doesn't "like" being next to other elements) <div>s or divisions are block elements and <span>s are inline. So setting display:block on any <div> is redundant. Setting the width to 100% makes the <div> occupy the entire line instead of a default: as little space as necessary. Not specifying width doesn't cancel text centering, it's just centered inside the <div> that fits perfectly.
1.The reason behind given width in absolute position is the default position of absolute and relative is left,top so we have to specify the width to perform any center alignment action. also no need to give display block property to the class, it's by default block, if your are performing some toggle action then you have to apply that property to any css.
When ever we are applying absolute position to child div it is necessary to assign the relative position to the parent, because of doing this we are restrict the are for absolute position action, if we are not applying position relative property to the parent, child css have some top, bottom, left, right property then it will show some where in body of html.
For better understanding of css position property please follow the attached link to understand the nature of position property.
enter link description here
By default, an HTML element whose position is set to "absolute" will be positioned relative to the browser's viewport.
But if one of the element's ancestors is set to a non-static position, the element will be positioned relative to that ancestor. That ancestor is the element's "offset parent".
The problem: I want to absolute-position an element relative to the viewport, but unfortunately one of its ancestors is relatively positioned, so that has become its offset parent. Since I'm modifying a 3rd-party theme, I can't move the element or remove its ancestor's relative positioning.
Using CSS or JavaScript, is it possible for me to, in effect, set or reset an element's offset parent? I understand that the DOM property [element].offsetParent is read-only, but is there some way to indirectly have the effect of setting it?
You could use Javascript to move the element. Here is the jQuery solution with prependTo() function, you could also use appendTo().
http://jsfiddle.net/6557cnew/
$(function() {
$('.absolute').prependTo('body');
});
.relative {
position: relative;
left: 50px;
top: 50px;
border: 1px solid blue;
width: 100px;
height: 100px;
}
.absolute {
position: absolute;
border: 1px solid red;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="relative">
relative
<div class="absolute">
absolute
</div>
</div>
You can use the value of the offset parent to move the child - just calculate the value of the child based on the rendered coordinates of the parent relative to the window.
CSS property position: fixed uses the viewport instead of the ancestor. However it's fixed on the screen when scrolling, so this may be an issue.
I created two sibling divs and applied negative margin on the last one, but when I added position: relative to the first one, it overlapped its next sibling:
.box {
width: 100px;
height: 100px;
}
.box-1 {
position: relative;
background: orange;
}
.box-2 {
margin-top: -50px;
background: yellowgreen;
}
<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>
However, MDN says that
positioned (absolutely or relatively) with a z-index value other than "auto" will create a new stacking context.
So I guess it isn't the stacking context that causes overlapping, any idea about how this happens?
Standard blocks in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy.
Example being
.absolute {
position: absolute;
background:purple;
left: 80px;
}
.relative {
position: relative;
left:50px;
background:yellow;
top:-50px;
}
div {
width:100px;
height:100px;
border: 1px dashed #999966;
background:blue;
}
<div class="absolute">absolute</div>
<div>normal</div>
<div class="relative">relative</div>
<div>normal</div>
Something cool about relative though, is that it's still considered to be in it's original location, even if it's been moved if you're using left, right, top, bottom. If you use margins to position the element the boundaries of the container are also moved with it. This can be seen using the same example above but changing the relative position to use margining. Reference to relative positioning
Non-positioned elements are always rendered before explicitly positioned elements. This means that by applying position: relative to 'box-1', it is rendered after 'box-2' and so appears on top of it.
The overlapping is caused by margin-top: -50px; in your CSS
Here is a decent explanation:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index
Standard blocks in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy.
Why does an absolutely positioned element depend on its parent for text wrapping? Doesn't position: absolute remove an element from the flow?
I'm looking to remove this boundary. This is like an implied max-width that I don't want; I want another developer to be able to set this max-width, and not worry about this arbitrary bound. How do I remove this behavior?
For convenience, here is a jsbin.
Doesn't position: absolute remove an element from the flow?
This has nothing to do with the flow. The width of an element always respects its containing block. If the element is absolutely positioned, then its dimensions can be constrained by top, right, bottom and left, but as long as its width is auto then it must still be constrained to the width of its containing block (making it no different from in-flow block boxes in that respect), which in your case is its absolutely-positioned parent. There isn't really any other element whose constraints the absolutely-positioned element could size itself with respect to without compromising the flow of its text.
For the specifics of how this width is calculated, refer to the spec.
Try this:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="absolute-parent">
<div id="absolute-child">
Why does this text wrap around, even though this container has been removed from the flow of its parent?
</absolute-child>
</absolute-parent>
</body>
</html>
CSS
body * {
outline: 1px solid black;
}
#absolute-child {
position: absolute;
left: 100px;
top: 40px;
}
#absolute-parent {
/*position: relative;
left: 100px;
top: 100px;*/
width: 200px;
height: 100px;
border: 1px solid black;
}
I removed the positioning from the absoluet parent element and also turned that and the child element into divs with ids.
I'm trying to break out of a parent div so I can have a colour div cover the width of the browser.
However, for some reason it pushes the block off to the left.
This is my site.
This is my code:
HTML:
<div class="aboutTop"></div>
CSS:
.aboutTop{
width: 100%;
height: 600px;
background-color: black;
margin-left: -100%;
margin-right: -100%;
}
Where am I going wrong?
To make your div "break out" of its parent, you'll have to use position: relative;
HTML:
<div class="aboutTop">
<div>break out!</div>
</div>
CSS:
div
{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.aboutTop div
{
position: relative;
top: 50px;
left: 50px;
}
This is because child elements are restricted to the boundaries of their parents. USing positioning takes the element out of the document flow. Using relative positioning takes it out of the flow but uses its original position within the parent as the point of reference. Absolute uses the top left corner of the browser window as its reference. :)
http://jsfiddle.net/qkU7F/
The width will always reference the parent div, no matter what. So you can use jQuery to set the width of the element based on the window width.
var winWidth = window.innerWidth;
$('.aboutTop div').css("width", winWidth);
http://jsfiddle.net/qkU7F/3/
In this:
margin-left: -100%;
margin-right: -100%;
The percentages are relative to the parent element.
So if the parent element is 200px wide 100% will be 200px.
If you want something to span the width of the browser you have a couple of options:
Use absolute position and left:0; right:0;
make the element a direct child of the body element and set it's width to 100%
.aboutTop{
position:fixed;
width: 100%;
height: 600px;
background-color: black;
margin-left: -100%;
margin-right: -100%;
}
When you give a width:100% without positioning, it will take 100% with respect to parent division. You need to make it fixed, or you need to change the width of the parent division.
The code you write, must from start be aimed at what you want to achieve. For something like this, you should not have a parent division with less width.
If yo use relative positioning, or absolute with negative margin the width will still be 100% of parent division. You will have to increse width to something like 110% to achieve.
I think it's better to remove padding of your div #site. let it to have full width of browser.
then apply padding to children divs as you want.
You're setting width: 100% but also margin-left: -100%. This means that the element will span from -100% to 0.
Since you're also setting margin-right: -100% it looks like you want it to span from -100% to +200%, which means you need to set width: 300% instead.