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
Related
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).
I have 2 divs. The parent div has relative position and the child div has fixed position.
If I use a flat amount of width on the parent div, width: inherit; works perfectly.
When I use width: 100%; on the parent div, child div has more width than its parent.
*,
*::before,
*::after {
box-sizing: border-box;
}
.content {
position: relative;
background: black;
width: 100%;
}
.fixedElement {
position: fixed;
width: inherit;
background: yellow;
z-index: 2;
top: 0px;
}
<div class="content">
parent
<div class="fixedElement">
child
</div>
</div>
Fiddle
Am I missing something here?
I'm thinking of using jQuery to set the width of the child but I'm sure it's not a good solution as it could be solved only with css.
The body has a default margin. So the parent element will fill the entire width but will be limited due to that margin. The fixed element is not bound to the body and is the full width regardless of the margin.
However, it sticks out to the right of the parent because it is in the parent which has a position: relative. If you add a CSS rule like
body {
margin: 0;
}
parent and child will be the same size.
Because you are using position: fixed and top: 0 child div is overlapping your parent. If you need your child div be with position: fixed and you want to see the whole parent element, try to add also position: fixed to your parent and add some top value. This will show your parent elemtn under child element.
Or another solution could be is to change places for parent and child elements and use display: inline-block for both of them
if you want the child element to inherit the width of the parent then it should be position absolute rather than fixed.
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 am trying to align (and stack) some images inside a bootstrap grid.
For some reason, the images aligns to the window and not the grid.
I use position:absolute which work like this (http://www.w3schools.com/):
"An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>"
Here is a jsfiddle :
http://jsfiddle.net/sbE6t/
.rings img {
position:absolute;
top: 0px;
left: 0px;
}
As you quoted, they will be absolutely positioned to the next non-static element. If no such element is found, the containing block is <html>.
Set position relative to the img's parent:
.rings {
// other styles
position: relative;
}
And it works
your wrapping element must be set to position:relative
.rings {
overfow:hidden;
height: 400px;
background: #999;
position:relative;
}
I have an absolute div inside a relative div. It's essentially a container for a absolute positioned corner banner, on the top right side of the page.
It works fine with Chrome, but not with IE. In IE it appears positioned absolutely, but inside its container. I'd like to override this, if possible, due to the way this site is built (complete template on a CMS):
#corner-banner a {
position: absolute;
right: 0;
top: 0;
display: block;
height: 200px;
width: 200px;
background: url(../images/down.png) no-repeat;
text-indent: -999em;
text-decoration: none;
}
#corner-banner a:hover {
background: url(../images/up.png) no-repeat;
}
Thanks for reading and for any input.
Cheers!
That is correct behavior. Absolute position inside a relatively positioned element will be absolutely positioned relative to the containing element.
Are you sure that the parent relative container is a div and not a td ?
EDIT
ok
This is not a CSS problem, but a bad HTML organization.
So, if you want your element to be positioned by the window, and not by his relative parent coordonates, you must put it outside the relative element.
Something like that :
<body>
<div id="corner-banner" class="norelative_element">
<!-- Your content with absolute position by the window !-->
<a>...</a>
</div>
<div class="relative_element">
<!-- Your content with relative position !-->
</div>
</body>