Concern about CSS absolute position - css

Does the position: absolute remove the element completely from the page's document flow or just removes it from the parent container? and if it gets removed from the page's document flow doesn't that hurt the accessibility of the website? I mean wouldn't that make people who use assistive devices to browse your website unable to find out about that specific element?
I tried position: absolute on an element and it got removed from the page and now I'm having concerns about the accessibility of my page.

If you are not seeing an absolutely positioned element, you likely do not have a width and height set in its style or there is something going on with its left, right, top or bottom positioning (non existent?) that is causing the element to not be seen.
i tried position: absolute on an element and it got removed from the
page and now i'm having concerns about the accessibility of my page.
Have you right clicked on the page where you expect the element to show up and looked in your browsers inspector to see if the element is in fact there or not?
I have included a few examples of position absolute using parent/child elements with varying styling below. Also I have included relevant links to MDN and W3 that I think will help in your understanding of positioning and its relationship to block formatting and what the Document Object Model (DOM) is.
MDN on position
MDN on Block Formatting Context
W3 on DOM
.relative {
position: relative;
}
.absolute {
position: absolute;
left: 75px;
top: 75px;
}
.parent1 {
width: 200px;
height: 200px;
background: teal;
}
.parent2 {
width: 200px;
height: 200px;
background: orange;
}
.parent3 {
width: 200px;
height: 200px;
background: green;
}
.parent4 {
width: 200px;
height: 200px;
background: purple;
}
.parent5 {
width: 200px;
height: 200px;
background: yellow;
}
.parent6 {
width: 200px;
height: 200px;
background: grey;
}
.child1 {
height: 50px;
width: 50px;
background-color: lightblue;
}
.child2 {
/*this element will not show up as there is no width or height set*/
background: red;
}
.child3 {
/*you will only see the content within this element if present*/
background-color: lightgreen;
}
.child4 {
/*This element will not preside in its parent as the parent element will not be set to relative.*/
width: auto;
height: auto;
left: 300px;
top: 200px;
background-color: rgba(45,67,244, 0.2);
}
.child5 {
/*This element will not preside in its parent as the parent element will not be set to relative.*/
left: 300px;
right: 400px;
top: 300px;
bottom: 400px;
/* Note there is no background showing on this element! as height and wiodth are not defined*/
background-color: rgba(90,150,90, 0.2);
}
.child6 {
/*This element will not preside in its parent as the parent element will not be set to relative.*/
height: 100px;
width: 100px;
top: 400px;
left: 300px;
/* Note there is no background showing on this element! as height and wiodth are not defined*/
background-color: grey;
border: 1px solid black;
}
<b>NOTE: This snippit will be best viewed in full screen mode</b>
<div class="relative">MDN documentation on <i><b>position: absolute:</b></i> The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
<i><b>NOTE:</b></i> The element establishes a new block formatting context (BFC) for its contents. Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, non-replaced, absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto.
</div>
<div class="parent1 relative">Parent 1:
You can see the absolute positioned element as it has left/right, width and height set
<div class="absolute child1">absolute
</div>
</div>
<div class="parent2 relative">Parent 2: You can NOT see the absolute positioned element as its width and height are not set, nor doies it have any content, however, if you look in your console inspector for your browser, you will see the element along with its css selectors within the HTML
<div class="absolute child2">
</div>
</div>
<div class="parent3 relative">Parent 3: You will only see the content and its direct BG within this absolute element as height and width are not present
<div class="absolute child3">absolute
</div>
</div>
<div class="parent4">Parent 4: This parent element does not have position relative, lets see where the child resides
<div class="absolute child4">Child 4, parent 4, absolute, parent not relative, this set to the div container that is positioned relative
</div>
</div>
<div class="parent5">Parent 5: This parent element does not have position relative, lets see where the child resides
<div class="absolute child5">Child 5, parent 5, absolute, parent not relative.
</div>
</div>
<div class="parent6">Parent 6: This parent element does not have position relative, lets see where the child resides
<div class="absolute child6">Child 6, parent 6, absolute, parent not relative
</div>
</div>

Related

after applying position:absolute; on child <div> it is causing the parent <div> to not take up full height to contain the child <div>

I have read so many question related to what I am asking but none of them answered/explained the question in my question's context. So what is happening is I have two divs a parent(.outer) and a child(.inner) div, and I am applying position: relative to parent and position: absolute to child, also I am adding a height of 1200px to child div, but the parent div is not taking up the full height as that of child div, I know a lot of question like has been answered on SO, but I want some explanation about why position: absolute on child element is causing or stopping the parent to take up the height to contain its child. Removing position absolute do let parent div to take the whole height to contain it's child div but I don't need tricks, but the explanation to why is position: absolute is causing the problem, What exactly position absolute is doing in this context, Here's my code snippet for the same,
.outer{
width: 100%;
min-height: 400px;
background-color: hotpink;
position: relative;
}
.inner{
position: absolute;
background-color: palegreen;
width: 30%;
height: 1200px;
top: 20%;
left: 20%;
}
<div class="outer">
<div class="inner">
</div>
</div>

What is this div collapse an example of?

Here is the jsfiddle to illustrate my question.
I have a floated div with no height (.card). It contains a nested div (.image) with an image. The image makes the bounding box of .card expand to wrap the image.
However, when I nest a second div (.text) inside .card as a sibling to .image and use negative margin-top to position .text in top of the image, the image no longer manages to expand the bounding-box of .card to match the bottom of the image. The bottom-boundary of .card instead creeps up and follows the bottom boundary of .text.
Why does not the image succeed in expanding its grand-parent any longer when .text is present?
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
</div>
<div class="card">
<div class="image">
<img src="https://dl.dropboxusercontent.com/u/55892413/jsfiddle/image.jpg" width="200px"></div>
<div class="text"></div>
</div>
img {
display: block;
}
.card {
border: 1px solid black; //shows where the bounding-box of this div is
width: 200px;
position: relative;
float: left;
}
.text {
width: 100px;
height: 100px;
background-color: red;
margin-top: -120px;
position: relative;
}
If m not wrong to get your point then you are missing position:absolute.
Remember you can fix position of inside element only when parent div is relative and inside element absolute.
UPDATED
This issue is occurring because you are trying to use .txt(child) inside .card(parent) with position relative but with wrong way. Remember whenever you are using position, parent should be relative and child will be absolute so child will move inside parent container without breaking the flow(in your case it is affecting the parent div and breaking the border) so to over come this issue use position:absolute on child and then you can use .txt class with ease.
Just change position: relative; to position: absolute; in .text class and you are done.
See here

Why does an absolutely positioned child expand container height and how to prevent this?

Suppose you have a parent div that contains several normal children and one absolute child.
I've read practically everywhere that a child with position: absolute will not influence parent's height, since it is out of the normal flow. However in my case, an absolute element expands the parent, and I can't understand why.
(I tried reading the spec but I'm really lost.)
HTML
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="outsider"></div>
</div>
CSS
.container {
overflow: hidden;
}
.block, .outsider {
width: 100%;
height: 1000px;
}
.block {
background: red;
}
.outsider {
position: absolute;
left: 0;
top: 3000px;
background: green;
opacity: 0.5;
}
Why does the browser let me scroll past the element's supposed height? It seems consistent in Chrome, Safari and Firefox so I presume it's part of the spec.
How do I prevent this behavior? I'd like absolutely positioned element to be cropped if it doesn't fit into the container height “dictated” by “normal” children.
See it live.
You are missing a position on your parent container. Add
.container{
position: relative;
}
The absolutely positioned element will go back up the DOM to find the nearest positioned parent, in this case you don't have one explicitly defined, so it's going back up to <body>

Is there any difference between using absolute position around a relative position wrap and an absolute position around a static position wrap?

I was just wondering if there is any difference between using it in different ways and what is the point of using it around a relative position wrap -- especially if the main target is the top property? Can someone tell me what is the main purpose(s) of using it around a relative position wrap, like in what cases it is important to do so?
Here is something that I was trying and I find no difference between using absolute position under a relative and under a static position -- I mean when it comes to "top" property.
<head>
<style>
#box_1 {
position: static;
width: 200px;
height: 100px;
background: yellow;
}
#box_2 {
position: relative;
width: 700px;
height: 60px;
background: red; left:300px;
}
#box_3 {
position: absolute;
width: 700px;
height: 60px;
background: black; left:200px; top: 300px;
}
#box_4 {
position: absolute;
width: 700px;
height: 60px;
background: green; left:200px; top: 300px;
}
</style>
</head>
<body>
<div id="box_1">
<div id="box_2">
<div id="box_3">
</div>
</div>
<div id="box_4">
</div>
</div>
</body>
If you don't wrap an absolute positioned element around a relatively positioned object, in your viewport, top will be top, but if you zoom in or zoom out, it will be top of the viewport and independent of your layout, weather in case of relatively positioned objects, if an absolute positioned object is wrapped around a relatively postioned object, it will be on top under the bounds of the relatively positioned object(s).
For Instance,
Let us take three div tags as mentioned in the question with ids, box_1, box_2 and box_3
Let us assume the below CSS and HTML for the three div's
The CSS:
#box_1 {
position: static;
width: 200px;
height: 100px;
background: yellow;
top:0px; left:0px;
}
#box_2 {
position: relative;
width: 1000px;
height: 100px;
background: red;
}
#box_3 {
position: absolute;
width: 200px;
height: 100px;
background: black; right:0px; top: 0px;
}
The HTML:
<div id="box_2">
<div id="box_1"></div>
<div id="box_3"></div>
</div>
From the above example, you can see that box_2 being a relatively positioned div is taken as a parent and wrapped around the box_1 and box_3 as absolute and static positions respectively. What happens, is that when the relatively positioned div is wrapped around the absolute and static positioned divs, the inner child wrap around the parent div and generate positions relative to their parent.
WORKING DEMO
If we change the HTML as below,
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
As now, all the divs are independent are are parent in itself, so what will happen is that all the div will behave according to their characteristics. for instance, the absolutely positioned div will be independent of its origin i.e the viewport and shall move left, right, top and bottom independent of origin and not according to the bounds of relatively positioned div as in the first scenario. Same goes for static and relative div which will behave according to their characteristics.
WORKING DEMO
I hope this helps.
An object positioned absolutely within a static wrapper will be positioned based on the viewport (or closest absolutely/relatively positioned parent).
An object positioned absolutely within an absolute or relative wrapper will be positioned based on the wrapper.

How to position a div horizontally based on a value?

How to position a div horizontally?
I used "Float:left" that works. what i need is , want to position that div based on a value( like margin) that value is the distance between the outer divs and inner div that is illustrated in image
I used the margin-left but it compares the distance between the previous child ,instead of the parent(outer div)
I tried the "left" $(area).css(left: LeftVal); that is also not working as expected. In my case I cant use the offset too.
How to achieve this ?
Note: The 100pxs in the image is for a example, i might use different values.
Set the positions as follows :
parent(container) {position:relative;}
child1 {position:absolute;left:100px;top:0;}
You can use position:absolute to position elements absolutely with respect to the parent.
<style>
.outer {
background: blue;
width: 200px;
height: 200px;
position: relative;
}
.inner {
position: absolute;
float: left;
background: red;
height: 200px;
}
.inner1 {
margin-left: 20px;
}
.inner2 {
margin-left: 120px;
}
</style>
<div class="outer">
<div class="inner inner1">Inner1</div>
<div class="inner inner2">Inner2</div>
</div>
You can choose not to use float if you don't want the div to resize based on the content. Instead, you could set the width manually for each div.

Resources