将div放在div而不使用绝对值(Putting div on div without using absolute)

将div放在div而不使用绝对值(Putting div on div without using absolute)

这是我正在研究的我的网站： http ： //mamgrow.lt/pagrindinis.html

在最底部，您可以看到红色div块。 我需要它在内容上移到顶部。 是否可以不使用position：absolute（因为我失去了中心对齐）和top：x？

问题是，在我滚动某个点之后，这个红色div将变得固定（将使用jQuery）。

对于信息div我用这个css：

.konteineris { margin-left: auto; margin-right: auto; width: 960px; overflow:hidden; background-color:#F0F0F0; position:relative; }

对于red div，我使用了这个css：

.konteineris2{ margin-left: auto; margin-right: auto; width: 960px; overflow:hidden; background-color:red; height:700px; position:relative; }

Here the website of mine that I'm working on: http://mamgrow.lt/pagrindinis.html

At the very bottom you can see red div block. I need it to move to the top on content. Is it possible without using position:absolute (because I lose center alignment) and top:x?

The thing is, that after I scroll at some point this red div will become fixed (will use jQuery).

For the information div I used this css:

.konteineris { margin-left: auto; margin-right: auto; width: 960px; overflow:hidden; background-color:#F0F0F0; position:relative; }

For the red div I used this css:

.konteineris2{ margin-left: auto; margin-right: auto; width: 960px; overflow:hidden; background-color:red; height:700px; position:relative; }

最满意答案

这就是你如何使用绝对定位将一个div居中对齐另一个div的顶部（或者在另一个div中，你应该发布你的html或做一个小提琴）。这不应该影响你的jquery

假设HTML

<div class="konteineris"> <div class="konteineris2"></div> </div>

垂直和水平居中对齐

.konteineris2{ position:absolute; left: 50%; top: 50%; margin: -350px 0 0 -430px; }

水平居中对齐

.konteineris2{ position:absolute; left: 50%; top: 0%; margin: 0 0 0 -430px; }

This is how you use absolute positioning to center align a div on top of another div (or inside another div, you should post your html or make a fiddle).This should not effect your jquery

Assumed HTML

<div class="konteineris"> <div class="konteineris2"></div> </div>

Vertically and Horizontally center aligned

.konteineris2{ position:absolute; left: 50%; top: 50%; margin: -350px 0 0 -430px; }

Horizontally center aligned

.konteineris2{ position:absolute; left: 50%; top: 0%; margin: 0 0 0 -430px; }