Why is the wrapping around an absolute position element based on its parent?
Why does an absolutely positioned element depend on its parent for text wrapping? Doesn't remove position: absolute
an item from the stream?
I want to remove this border. It looks like an implied one max-width
, which I don't want; I want another developer to be able to install this max-width
and not worry about this arbitrary edge. How do I remove this behavior?
For convenience, here's jsbin .
source to share
Don't
position: absolute
remove an item from the stream?
It has nothing to do with flow. The width of an element always matches its containing block. If the element is completely positioned, its dimensions can be limited top
, right
, bottom
and left
, but until it width
is equal auto
, then it should still be limited to the width of its containing block (that does not differ from the flow Blocks in this respect) that your situation is his absolutely positioned parent. In fact, there is no other element whose constraints an absolutely positioned element can evaluate itself without compromising the flow of its text.
See spec for how this width is calculated .
source to share
Try the following:
Html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="absolute-parent">
<div id="absolute-child">
Why does this text wrap around, even though this container has been removed from the flow of its parent?
</absolute-child>
</absolute-parent>
</body>
</html>
CSS
body * {
outline: 1px solid black;
}
#absolute-child {
position: absolute;
left: 100px;
top: 40px;
}
#absolute-parent {
/*position: relative;
left: 100px;
top: 100px;*/
width: 200px;
height: 100px;
border: 1px solid black;
}
I removed the positioning from the parent absoluet and also rotated it and the child to a div with ids.
source to share