I am trying to understand positioning of elements in html. The accepted answer here says,
"All elements that are position:absolute; are automatically treated as
display:block, since that's the only logical display mode for absolute
positioning."
Is this always true? If display is always block for absolute elements, why the following code snippets appear differently? Please help me to understand this. thanks.
<div>
<div style="display:inline-block;">aaa</div>
<div style="position:absolute;">bbb</div>
<div style="display:inline-block;">ccc</div>
</div>
<br><br>
<div>
<div style="display:inline-block;">aaa</div>
<div style="position:absolute;display:inline-block;">bbb</div>
<div style="display:inline-block;">ccc</div>
</div>
There's a couple of things here. First, no, not all absolute positioned elements are treated as display:block. Their display value is blockified which means that they are converted to block-level display values. For example:
display:inline-flex => display:flex
display:inline-grid => display:grid
display:inline-table => display:table
display:inline list-item => display:list-item (Firefox supports inline list-item)
display:none and display:contents aren't changed.
display:inline, display:inline-block, and internal table object boxes =>
display:block
Elements that are already block level are unaffected. Flex is still flex, grid is
still grid, etc.
However, that doesn't explain why you get different results for your two cases, since in each case the absolute positioned items do indeed have a computed display value of block. For this, we need to address our expectations of what it means for an element to be display:block. We expect it to start a new line and have its left to right margin edges fill the width of the containing block.
In fact, that only applies to block level elements in normal flow. Absolute positioned elements are not in normal flow, and so those rules don't apply. They have their own set of rules, part of which say that if their top, left, bottom, right values are auto (which they are in your examples), the box is positioned according to where its position would have been if it hadn't been absolutely positioned. And if it hadn't been absolutely positioned, the display:block and display:inline-block difference would have had an effect, in your first case starting a new line, in your second case remaining on the same line.
The default behavior of position: absolute is display:block, but you override that default behavior when you add display:inline-block;.
Related
In my example I need to fix button .lot-item .bid-now to the bottom of .lot-item as in jsFiddle example bellow. I know most popular way is to make position: relative then of the child element position: absolute then bottom 0. But in this case all my items will loose weight property and will be ugly. Because my buttons most wide elements in the parent element. Also I am not able to make fixed wide weight for .lot-item. If there are any different solution for my case? jQuery solution is will be good one too
https://jsfiddle.net/z7Lgme5s/
I passed columns to FlexBox, and the results change, I send you the same code in fiddle
The parents .lots are passed to display: flex and flex-wrap: wrap to fall in another line
[https://jsfiddle.net/r0bin/0m13h5fk/1/][1]
I have a page with an input element whose position is determined by the normal flow of the page (i.e. its position is NOT explicitly defined as part of the element definition).
Then, I have other elements (divs) that are created programmatically with fixed position, and should appear behind the input element whenever there is an overlap between them.
I tried assigning to the input element a ridiculously high z-index (100001, while the programmatically elements have a z-index < 1000) but the input element still is shown BEHIND the others.
I found some posts suggesting that the input element should also be positioned as the other elements, but this could have negative impact on the general layout of the page.
Does anyone have a suggestion I may try?
Thanks.
z-index only applies to positioned elements, so you need to position it.
Set it to position: relative if you want to position it without moving it or taking it out of normal flow.
z-index is intended for elements positioned as absolute, relative and fixed.
Try setting your input position: relative, then you z-index should work.
#myInput {
position: relative;
z-index: 100001;
}
I have the following grid and each red block is a div. As you can see, the longest div is pushing the bottom two divslower, creating unwanted space.
Here is how I would like to have it, so the space is tighter and not broken by the longest div:
Is there a CSS solution to this, or an alternative to Masonry / Isotope?
There is no way to accomplish what you want using floats. You can however use:
div{
position:absolute;
}
This will achieve what you want because it will allow you to position each box exactly where you want, down to the pixel. Be aware that this will remove each div from the document flow. For that reason and a few others, I recommend constraining the divs within some sort of container that is set to:
position: relative;
This will limit the scope of the absolute positioning.
I have a problem getting the width of a div's content (of the content, not the div itself).
The usual approach would be Javascript's scrollWidth property, I think.
The problem: within this div, another div is positioned absolute and has a negative right value (-350px). I can't change this (it's a menu, sliding in when you click a button, overlapping other elements. It needs to be positioned like that).
The scrollWidth returns the width of the outer div's content PLUS the negative right-value (in Chrome, didn't test other browsers).
Here's a short example:
/* ... */
http://jsfiddle.net/R4Cs5/12/
But I need the content's width that is accessible by scrollbars.
Any ideas?
Please use Jquery, no plain Javascript.
Thanks in advance.
I see that your jsfiddle doesn't import any jQuery library, while you wanted to use it. Anyway, with jQuery you can use .width to get an element's width see here: jsfiddle.
I have a <div> that has children appended to it by a script. These children elements are automatically appended by a PHP script and positioned using position:absolute. I tried to give the parent <div> the style min-height:400px allowing the elements appended to the <div> to increase the parent's height. The only problem is that the height does not increase when I do this. Does anybody know what I can do to fix this?
EDIT: I am not able to use position:relative for positioning my elements. Are there any solutions that allow for position:absolute.
Yes you can use position absolute (yeee♥!)
LIVE DEMO TEST CASE
By simply doing:
$(this).height( this.scrollHeight );
or with pure JS:
this.style.height = this.scrollHeight ;
and adding this to your element's CSS:
overflow:hidden;
overflow-y:auto;
Edit:
The demo tested fine in IE10, Firefox, Chrome, Safari, and Opera.
The key point here is setting the overflow value for the x or y axis (whichever dimensions you need the size of) to auto, rather than the default value of visible. Then the scrollWidth or scrollHeight property can be used on the HTML DOM object to get the full size of the element, including any absolutely-positioned descendants.
Odd as it seems, this is entirely consistent with the fact that setting overflow:hidden for a container clips any absolutely-positioned descendants. Apparently, elements with position:absolute aren't quite as "out of the flow" as we've always been told :)
You should not use position: absolute for this because stuff that is positioned that way will be pulled out of the normal render flow. This results in the parent not noticing that its content s acually very high. Use position: relative for the child div's. This way the parent will grow automatically.