如何CSS位置工作,为什么绝对元素堆叠在一起,而不是堆叠一个接一个 [英] How CSS Positions work, why absolute elements stack up on each other instead of stacking one after other
问题描述
如何在下面的代码中同时显示#row1
和#row2
垂直,好像没有任何绝对/相对
定位?
< body>
< div class =container>
< div id =row1class =row>
< div class =col1> Hello< / div>
< div class =col2> World< / div>
< / div>
< div id =row2class =row>
< div class =col1> Salut< / div>
< div class =col2> le monde< / div>
< / div>
< / div>
body {position:relative;}
.container {position:absolute;}
.row {position:relative;}
.col1,.col2 {position:absolute;}
(不移除您的 position
属性)
c> s 字符,它将位于 top
,因为您的容器元素不在流中,因此, height
将被考虑在文档流程中,除非和直到你在一些元素中包装 s
,并使用 margin
padding
或CSS排列。
CSS位置说明
正如我所说的,下面是CSS Positioning实际工作原理的几个例子,首先,有 position
属性 static
这是默认的一个, relative
, absolute
和固定
,所以从 static
这里,元素只是叠加在另一个之下,除非它们是浮动的或使 display:inline-block
,但使用 static
定位顶部
,右
来到 position:relative;
我已经解释了一般,它只是等同于 static
,它堆叠在其他元素上,它在文档流中,但您可以使用顶部$调整元素
position
c $ c>, right
, bottom
和 left
物理上,元素停留在流程中,只有元素的 position
发生变化。
现在有 absolute
这通常很多人不明白,当做一个元素 absolute
它离开文档流,因此它保持独立,它与其他元素定位无关,除非它与其他 position:absolute
元素重叠,可以使用 z-index
更改堆栈级别。这里要记住的主要事情是有一个 position:relative;
容器,以便你的绝对
定位元素是相对到相对
定位的元素,否则你的元素将在野外飞出。
值得注意的是 position:absolute;
元素放置 absolute;
code>定位的父元素,而不是相对于该元素和不相对到可以定位的大的父元素 relative
/ p>
演示3 (不 position:relative;
container)
演示4 (具有 position:relative;
容器)
最后是位置固定
,这与 absolute
但是它滚动的时候,它流出文档流,但它滚动,还有 position:fixed;
元素不能相对到具有任何类型
位置
的任何容器元素,甚至相对
,位置
固定
元素总是相对
视口,因此设计师使用 position:absolute;
当他们想要一个固定
属性
到到到
。
How can get both #row1
and #row2
in the following code to be visible, one after the other vertically, as if there wasn't any absolute/relative
positioning involved?
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
body {position:relative;}
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
Update
I need the elements to have the positioning provided in the CSS rules, for reasons excluded here. So my question is if it's possible to achieve what I'm looking for without removing the above CSS? I.e. having the two .row
div
to appear as "normal" block
elements.
Update 2
If enough height is specified in px
, the result have the expected look. But the content is programmitacally dynamic so I don't know the height on beforehand :(
Well you have some weird wishes here so let me explain you what those positions really mean in CSS and how they work, using position: relative;
is just like using static
position
, the difference is making an element position: relative;
, you will be able to use top
, right
, bottom
and left
properties, though the element will move, but physically it will be in the document flow..
Coming to position: absolute;
, when you make any element position: absolute;
, it gets out of the document flow, hence, it has nothing to do with any other element, so in your example
you have .col1, .col2 {position: absolute;}
which are positioned absolute
and since both are out of the document flow, they will overlap... Because they are already nested under position: absolute;
parent i.e .container
and since no width
is assigned, it will take the minimal width
and hence, your elements overlap, if you cannot change your CSS(which according to me doesn't make any sense why you can't change) still if you want, than you can do is this..
Demo (Without removing any of your position
property) And this is really dirty
For the s
characters, it will be at the top
as your container element is out of the flow, and hence, no height
will be considered in the document flow, unless and until you wrap that s
in some element, and bring it down with, margin
padding
or CSS Positioning.
CSS Positions Explained
As I commented, here are few examples of how CSS Positioning actually works, to start with, there are 4 values for position
property i.e static
which is the default one, relative
, absolute
and fixed
, so starting with static
, nothing to learn much here, elements just stackup one below the other unless they are floated or made display: inline-block
, but with static
positioning, top
, right
Coming to position: relative;
I've already explained you in general, it's nothing but same as static
, it stacks up on other element, it is in the document flow, but you can tweak the elements position
using top
, right
, bottom
and left
, physically, the element stays in the flow, only position
of the element is changed.
Now comes absolute
which generally many fails to understand, when making an element absolute
it gets out of the document flow, and hence it stays independent, it has nothing to do with other elements positioning unless it's overlapped by other position: absolute
element which can be fixed using z-index
to change the stack level. The main thing to remember here is to have a position: relative;
container so that your absolute
positioned element is relative to that relative
positioned element, else your element will fly out in the wild.
It's worth noting that position: absolute;
element when positioned absolute;
inside an absolute
positioned parent element, than it is relative to that element and not relative to the grand parent element which may be positioned relative
Demo 3 (Without position: relative;
container)
Demo 4 (With position: relative;
container)
Last is position fixed
, this is same as absolute
but it flows along when you scroll, it's out of the document flow, but it scrolls, also, position: fixed;
element cannot be relative
to any container element having any type of position
, not even relative
, position
fixed
element is always relative
to the viewport, so designers use position: absolute;
when they want to have a fixed
position
behavior but relative
to parent and tweak the top
property onScroll
.
这篇关于如何CSS位置工作,为什么绝对元素堆叠在一起,而不是堆叠一个接一个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!