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
Related
I'm learning CSS and looking at this example:
https://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center
I don't understand why when I remove "position:relative" for the parent div, it effects the text inside.
As I understand position relative makes the html element you apply it to be positioned relative to it's original. But here they haven't set any properties except position relative so why is it needed?
Because, the position of the center div is absolute with left: 0 and top: 50% of the whole screen, unless you put it inside a parent with a relative position, it becomes left: 0 and top: 50% of that parent
.container div is the first parent of .center div the second parent is the body tag then the html tag. the tag that has relative position becomes the parent of .center div who has position absolute.
the relative position will let the text position according to its parent element. in order to position it with respect to the parent div or element in this case it is image. you need it to be positioned relative by that css tag position with value as relative.
Goal
I would like to position an element absolutely.
Issues
Oddly, said element somehow appears as if it were position: fixed. Weird!
html, body {
height:100%;
}
.absolute {
position:absolute;
}
This creates an element that acts like it is fixed on the page.
This is very puzzling and inconvenient. Here is a JSfiddle.
Help
Is there a way that I can add absolute positioning to this element without changing html and body height?
One last thing to note: In my case, the content inside the body overflows window height, if that's important...
Thank you for your help!
edit: Changed title slightly, removed unneeded interjections.
First let's understand how position:absolute works.
absolute position removes an element from the normal flow of the document and places it relative to the first parent that has relative positioning.
The default value of position property is static. So the class .absolute has no parent that is relatively positioned. Therefore it stays relative to the viewport and appears all the time even when you scroll.
So set a parent element of .absolute to relative positioning and you will get the desired result. Here, you can set the .element to relative positioning.
.element{
width:100%;
height:2000px;
position:relative;
}
You can open the fiddle below and scroll to see the desired effect.
Fiddle - jsFiddle
by default position absolute is relative to the body beacause the absolute element is out of the elements flow. So if you want your absolute element to be abble "to understand" the other elements and be abble to move width parent, it's parent should be in relative position.
regardless to your JSFiddle put a position relative to .element the .baby should be abble to move with it parent
.element {
width:100%;
height:2000px;
position:relative;
}
Here is my code
CSS
h2
{
position: absolute;
left: 100px;
top: 150px;
}
h1
{
position: fixed;
top: 300px;
}
HTML
<h1>
Heading for Fixed Position
<h2>
This is a heading with an absolute position</h2>
</h1>
I'm new to CSS so was experimenting with positioning. I read some where
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>:
If that is right then This is a heading with an absolute position message must be below the Heading for Fixed Position since h1 is the parent object and h2 being a absolute object must be positioned relative to h1. Please correct if I'm wrong.
Here is the JSFiddle link:
http://jsfiddle.net/KXmgG/
I would like to explain you how positioning actually works, there are 4 types
Static (Default)
Relative
Absolute
Fixed
Static position is nothing but a normal flow of the document where elements render on after the another (Excluding floats)
Relative position is something special, which turns out to be a great power when used with position absolute. When you want to use top, left, bottom and right instead of margins, you need to assign position: relative; to that element, after doing so, top, left, right and bottom properties will work.
When you use position: absolute; it gets out of the document flow, so if you have an element called div width class a. Now if you assign position: absolute; to class a, it will get out of the document flow, so when you use top: 0; it will fly away to the top of the document. So in order to restrict it, we wrap a container with position: relative; so that when you use position: absolute;, it will be absolute to that particular element and not the entire document.
Demo 1
Demo 2
Position fixed is entirely different, it is also out of the document flow as same as position: absolute; but the difference is that fixed positioned element cannnot be relative to any element, it has no contact whatsoever with any element, it is always calculated from the top, left, right and bottom of the window and not the element, also a fixed position element will flow as the user scrolls the document.
Demo
Coming to your answer, you are using fixed position and absolute position, both are out of the document flow, so they have no relation what so ever...
You are using top: 300px; for fixed position and top:: 150px; for absolute positioned element, so the fixed element will render below the absolute element, but when you try to scroll, your fixed element will scroll along where as position: absolute; element won't.
Edit as you commented
Go to w3c Validator and validate your document here
"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 :"
Yes but you dont have position:relative declared.
If you want you're parent transform you're html by this :
<div class="parent">
<h1 class="child">blabla</h1>
<h2 class="child">blabla</h2>
</div> <!-- end parent -->
<div class="relative">
<h1>
Heading for Fixed Position</h1>
<h2>
This is a heading with an absolute position</h2>
</div>
CSS :
.relative{
position:relative;
}
JSFIDDLE with
position relative / fixed / absolute /]
http://jsfiddle.net/KXmgG/1/
Please bear with me... and excuse my (probably) incorrect terminology:
In the following code I don't grasp why you set the containing (parent) div to 'position:relative' in order for the divs inside to be positioned in relation to the parent div (using 'position:absolute). I thought in order for this to happen the children divs would be set 'relative' to the parent. Am I to understand that essentially the parent div is saying to the other divs inside "hey, you can all be positioned 'relative' to me now!" I sort of expected it to work the other way around.
E.g. I expected the text would have been positioned "relative" to the containing div. Can someone explain why it works the way it does here? Thanks.
<div id="backgroundImage">
<h2 class="titleBox">I AM A TITLE</h2>
<p class="textBox">I am a description box</p>
</div>
#backgroundImage {
position: relative;
height: 225px;
width: 300px;
background-image: url (#);
}
.titleBox {
position: absolute;
top: 15px;
left: 0;
}
.textBox {
position: absolute;
bottom: 10px;
left: 0;
}
The documentation explains this very well, but I'll summarize.
An element with position:relative is first laid out just like any static element ... shifted according to the top, bottom, left and right properties
The position: relative box can be adjusted relative to its parent (even if its parent is static).
For position: absolute,
the containing block is the nearest positioned ancestor. By “positioned” I mean an element whose position property is set to relative, absolute or fixed
That is, the top, bottom, etc. properties on a position: absolute element are relative to the nearest containing element of a position other than static (including relative).
That is to say that position: absolute elements can still be positioned relatively.
You position the child elements absolutely, i.e you are specifying x/y co-ordinates for them (using left and top properties).
By default these will be positioned absolutely to the document, but by setting a parent container as position:relative, they will be positioned relative to that div, in an absolute manner.
If you set your element as position 'absolute' it will be out of the DOM.So you can set where ever you want unless or until your absoluted element parent or parents of parent... does not having any position relative.why we use position relative actually is if u want to style the the element irrespectively with other elements inside container, u can set position relative to the parent(means container). If #backgroundImage does not have position relative , your child elements will go initial position of your screen but if u want some where in the middle of ur page u have to styled the "backgroundImage" element as position :relative .. then the child element wil fly inside your "backgroundImage" container.
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.