I have a website with a gradient as background on the body. The .main div is absolutely positioned. I want it to have the same height as the content inside it, but how can I achieve that?
if the elements inside your absolute positioned div are positioned relative and have width and height you can apply this css to your .main div:
height:auto;
this will calculate the height depending on the height of all the content inside
Definitely do not have your main/container/wrapper div be absolutely positioned. Have it be positioned relatively.
<div class = "main">
<div class = "content">....</div>
</div>
Then you have your CSS:
.main {
position: relative;
margin: 0 auto;
}
.content {
height: 100%;
}
Look at this jFiddle: http://jsfiddle.net/persianturtle/3eJGr/
A great article on what absolute positioning really does can be found here
A segment:
Absolutely positioned elements are removed entirely from the document
flow. That means they have no effect at all on their parent element or
on the elements that occur after them in the source code. An
absolutely positioned element will therefore overlap other content
unless you take action to prevent it.
Related
So I'm trying to build a modal window (with a white background) with HTML/CSS and I want the modal window itself to be fixed positioned relative to the browser window. In addition, the modal contains a child img at the top and a child div at the bottom that will contain some description text in it. My purpose is to position the child div relative to the parent fixed modal window so that the child div has a left offset of about 8.33% of the width of the parent.
So initially I thought I should absolute position the child div, but once I do that the background of the parent modal windows does not extend to the child div:
here is the html/css for the above:
html:
<div class="modal col-4 l-offset-4" id="robot-modal">
<img src="media/robot_modal.jpg">
<div class="col-10 l-offset-1">
</div>
</div>
css:
.col-10 {
width: 83.33333%;
}
.l-offset-1 {
left: 8.33333%;
}
.modal {
#include align-vertically(fixed);
display: none;
z-index: 2000;
background: white;
img {
width: 100%;
}
div{
position: absolute;
background-color: blue;
height: 100px;
}
}
But when I change the child div's position to 'relative', then the correct background will show up:
I don't get the intuition why I should always relative position an element inside a fixed parent. Wouldn't positioning an element as relative make it impossible to adjust offset relative to its parent ? According to this article: http://www.webdevdoor.com/html-css/css-position-child-div-parent , if we want to position an element relative to its immediate parent, the parent better be absolute or relative positioned and the child must be absolute positioned. So in my case why does adjusting the offset of a relative positioned child also work? I don't want to assign a height to the parent modal. i want it to automatically enlarge itself when new elements are contained in it.
A parent does not take into account the size of the absolute child. According to MDN:
Absolute: Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block
If you put something after the absolute element, it goes on top, because the absolute element is no longer in the document flow.
You can do position: relative; left: 8.33%; right: 8.33%, or just leave it as static with margin: 0 8.33%;, or if you do absolute, you can set .modal { margin-bottom: [height of absolute DIV] }, if the height is set and won't change.
I am finding it strange that my absolute element is completely outside the parent element. I want it just perfectly contained within 100% of the element, nothing outside of it, but this doesn't seem to be how it happens. The absolute element left and top just start from the parent element, the absolute element is on 100% of the rest of the document.
HTML
<div id="box" class="home_box">
<div class="box_hover"></div>
<h3>Heading/h3>
<p>Content</p>
</div>
CSS
#box {height:200px; width:400px;}
.box_hover {background:#000; height:100%; opacity:0.1; position:absolute; width:100%;}
As you can see the height and width are 100%. What am I doing wrong?
#box needs to be position: relative, position: fixed, or position: absolute for a position: absolute child element to be positioned relative to it.
An absolutely positioned element will be positioned to the closest parent whose position is set to relative, absolute, or fixed. Without such a parent, it'll be positioned relative to the body.
position: relative for #box is most likely what you're looking for.
You should add position:relative to parent element
How can I contain an absolute positioned div inside a relative positioned div? For example, a structure like this:
.wrapper {
position: relative;
}
.contentWrapper {
position: absolute;
top: 0;
left: 0;
}
<div class="wrapper clearfix">
<div class="contentWrapper">
<div class="content">Looong text here...</div>
</div>
</div>
Will result as the height of the contentWrapper to be 0 (when element inspected) and the div with the content class will not show.
Is there a way to apply clearfix method for absolute positioned elements inside relative ones?
What I am trying to do here is to avoid the Looooong text from expanding the wrapper (wrapper has a dynamic width, cannot be fixed). contentWrapper contains the text and wraps it, also it fills the width of the parent wrapper so that it does not get expanded. The only problem is the height of the contentWrapper is 0, and the text is not showing.
Any other way to do this?
No, this is not possible, you can only use a clearfix to clear floated elements.
If the only element inside your relatively positioned container is positioned absolute, you will have to specify a height on the container. The problem is that position:absolue removes the element from the content flow, so the container doesn't recognize the absolutely positioned element's height.
I have one div - the #container - that stretches across the window, filled with a graphic. I need a bar to float over the container div on the right side. If I use position:absolute and right:0, the div is positioned according to the window, not the #container div.
If I use position:relative, then the div is positioned according to the #container div but still takes up space and won't be hovering over the #container content.
Here is a JSFiddle that I made with my attempt.
http://jsfiddle.net/y8LCu/
NOTE that I do not want to use float:right, because that would keep the side div in the flow of the content, which I do not want.
I think I got it the way you wanted it?
http://jsfiddle.net/y8LCu/9/
You needed to make the parent position: relative and if you don't want the overflow you need overflow: hidden.
position:absolute; allows you to position an element compared to any positioned ancestor.
<div class="parent">
<div class="child">
</div>
</div>
.parent { position : relative; }
.child { position : absolute; }
Now, child will position itself based on the parent.
If the parent doesn't have a position set, then it will look at the position of the grandparent...
...and on and on, and if none of them have a position set, then it will look at the position of the actual web-page.
Also, if you have multiple positioned elements (whether relative/absolute/fixed) near the same place, and you want them to overlap in an order you set in CSS, and not in the order of which is set on the page last...
...then you also need to start using z-index (which only works on positioned elements).
The higher it is, the more stuff it stacks on top of.
Set the parent's position to relative
#container
{
position:relative;
}
I have this simple code to place two div #container elements side by side. In each of these there is a child div #child which I would like to position relative to its parent (div #container).
<style>
.container {
float:left;
margin-right: 10px;
}
.child {
position: absolute;
left: 0.2ex;
}
</style>
<div class="container">a<br/>
<div class="child">b</div>
</div>
<div class="container">c<br/>
<div class="child">d</div>
</div>
However, rather than the result I would expect - 'd' is positioned below 'c' but pushed slightly to the right, 'd' is instead positioned over 'b' and slightly to the right. In other words the absolute position has been rendered relative to the page rather than to its containing element.
Why is this the case? What have I misunderstood about absolute positioning here?
How can I get the behaviour I was expecting?
See this jsFiddle.
Absolutely positioned elements are positioned with respect to the edges of their containing block, which is defined as the first ancestor that is not position: static.
None of the ancestor elements are position: static, so it is with respect to the initial position of the viewport.
Set position: relative on the .container elements if you really want to absolutely position them.
That said, it looks like you would be better off doing this instead:
.child {
margin-left: 0.2ex;
}
To position the child relative to its parent, just add position:relative to the PARENT'S style - then all children with position:absolute will be absolute relative to the parent.
.container {
float:left;
margin-right: 10px;
position:relative;
}