Css位置相对/绝对扰乱布局

请检出以下小提琴 HTML结构与Css几乎相同。我正在使用我的项目。目前，我有3个部分在我的设计 HEADER 组合滑块令人不安的部分Css位置相对/绝对扰乱布局

我使用自举3最新版本。

我已经给出位置相对投资组合部分和它的内部块以绝对顶部位置：-50px;

这里的每件事都很好。但问题来了，当我添加新的部分“滑块”。它将通过投资组合部分。我试图给它的位置和不同的块属性。但滑块部分仍然通过投资组合部分。当我从投资组合中删除持仓部分时，Slider部分回到正常位置，这正是我想要的。任何人都可以请检查下面的小提琴，并告诉我我做错了什么。设计就像投资组合部分稍微超过标题。这就是为什么我使用职位。

<script async src="//jsfiddle.net/DTcHh/29616/embed/"></script> 
https://jsfiddle.net/DTcHh/29616/

来源

2017-02-12 Danial

你不能在提问中嵌入小提琴。您需要手动添加代码。 – BoltClock

我宁可不使用位置：绝对不需要，因为它不需要，因为它打破了流动。您只需要定位相对或负边距顶部以向上移动元素。见示例https://jsfiddle.net/DTcHh/29623/

<header class="container-fluid header"> 
    <div class="row"> 
    <h1>HEADER</h1> 
    </div> 
</header> 
<section class="container"> 
    <div class="row position-relative"> 
    <div class="col-sm-10 col-sm-offset-1 position-relative-col"> 
     <div class="height"> 
     <h2>Some Portfolio items here</h2> 
     </div> 
    </div> 
    </div> 
</section> 
<section class="container trouble"> 
    <div class="row"> 
    <h3>Slider Troubling section</h3> 
    </div> 
</section> 

/* Latest compiled and minified CSS included as External Resource*/ 

/* Optional theme */ 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
.header { 
    background: lightblue; 
    padding:25px; 
} 
.position-relative { 
    position:relative; 
} 
.position-relative-col { 
    background: green; 
    position: relative; 
    top: -50px; 
} 
.trouble { 
    background: darkblue; 
    opacity: 0.8; 
    color: white; 
} 
.height { 
    height: 100px; 
}

来源

2017-02-12 12:48:51

嗨.. !!此解决方案有效。我有一个问题？有什么理由不使用位置：绝对？因为当我从我的代码中删除绝对位置，并给予顶部：-50px到我的相对定位元素布局是固定的。 – Danial

因为如果你设置position：absolute，你会打破元素的流动，并因此破坏了布局。所以，如果你可以使用位置相对或负边缘顶部确实。这对100％是正确的。如果它适用于您，请将其标记为答案。 –

感谢您的解释。 – Danial

尝试添加到容器类的height属性。它应该工作：

.container{ 
    height: 100px; 
}

来源

2017-02-12 12:33:25 Eliran

我给.container一个固定的高度。但由于集装箱高度将根据投资组合项目而变化。所以我认为应该有另一种方式？ – Danial

所以也许最好不要使用绝对位置，而是使用相对位置并将容器放在边缘。 – Eliran

检查我的更新，我希望它可以帮助。

http://jsfiddle.net/DTcHh/29626/

我做什么都放在滑块和投资组合为，使用position:relative和top: -50px;

来源

2017-02-12 12:52:19 zalijal

谢谢。你刚刚解决了我的问题。但我有一个问题。为什么你没有在内部div上使用绝对位置，并给它顶部：-50px？你只是直接给顶部：-50px相对位置？有什么我应该知道的吗？在我原来的项目代码中，我只删除了position：absolute，并给出top：-50px到我的相对定位元素，并且布局得到了修复。 – Danial

我不知道如何解释这一点，让我尝试......我总是使用位置绝对的元素，需要放置在另一个元素的顶部，更像是Photoshop上的图层，我猜。你应该尝试将绝对位置放在具有相对位置的元素中，然后将其与没有位置的元素进行比较。 – zalijal

您使用的是自举3格错了相同的标记。对于每一行，您必须添加一个row类，并且对于row类中的每个项目，您必须使用类col-*-*。我已经根据您的代码编写了一些适当使用引导程序网格的新代码。

http://jsfiddle.net/DTcHh/29627/

请让我知道这是不好的，你努力实现，而不是什么。

来源

2017-02-12 12:55:00 Gijsberts

感谢网格使用建议。但这不是我正在寻找的。 – Danial

Css位置相对/绝对扰乱布局

回答

相关问题