Html Css相对/绝对位置干扰了布局_Html_Css_Css Position

Html Css相对/绝对位置干扰了布局

html css

Html Css相对/绝对位置干扰了布局,html,css,css-position,Html,Css,Css Position,请检查下面的小提琴 HTML结构和Css几乎相同。我在我的项目中使用的。目前我的设计中有3个部分标题文件夹滑块扰流段我使用的是Bootstrap3的最新版本我给出了相对于投资组合部分及其内部块的位置，即顶部绝对位置：-50px 这里一切都很好。但问题来了，当我添加新的部分“滑块”。这是投资组合部分。我尝试过给它定位和不同的块属性。但仍然是滑块部分将超过投资组合部分。当我从投资组合部分删除头寸时滑块部分返回到我想要的正常位置。谁能检查一下下面的小提琴，告诉我我做错了什么。设计就像

请检查下面的小提琴 HTML结构和Css几乎相同。我在我的项目中使用的。目前我的设计中有3个部分标题文件夹滑块扰流段

我使用的是Bootstrap3的最新版本

我给出了相对于投资组合部分及其内部块的位置，即顶部绝对位置：-50px

这里一切都很好。但问题来了，当我添加新的部分“滑块”。这是投资组合部分。我尝试过给它定位和不同的块属性。但仍然是滑块部分将超过投资组合部分。当我从投资组合部分删除头寸时滑块部分返回到我想要的正常位置。谁能检查一下下面的小提琴，告诉我我做错了什么。设计就像公文包部分有点超出页眉。这就是为什么我要用position

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


https://jsfiddle.net/DTcHh/29616/

尝试添加到容器类高度属性。它应该在以下方面发挥作用：

.container{
    height: 100px;
}

尝试添加到容器类高度属性。它应该在以下方面发挥作用：

.container{
    height: 100px;
}

我不想在不需要的地方使用position:absolute，因为它会破坏流程。只需将相对或负边距置于顶部，即可向上移动图元。参见示例


标题
这里有一些投资组合项目
滑块扰流段
/*作为外部资源包含的最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.标题{
背景：浅蓝色；
填充：25px；
}
.相对位置{
位置：相对位置；
}
.位置相对坐标{
背景：绿色；
位置：相对位置；
顶部：-50px；
}
.麻烦{
背景：深蓝色；
不透明度：0.8；
颜色：白色；
}
.身高{
高度：100px；
}

我不想在不需要的地方使用position:absolute，因为它会中断流程。只需将相对或负边距置于顶部，即可向上移动图元。参见示例


标题
这里有一些投资组合项目
滑块扰流段
/*作为外部资源包含的最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
.标题{
背景：浅蓝色；
填充：25px；
}
.相对位置{
位置：相对位置；
}
.位置相对坐标{
背景：绿色；
位置：相对位置；
顶部：-50px；
}
.麻烦{
背景：深蓝色；
不透明度：0.8；
颜色：白色；
}
.身高{
高度：100px；
}

检查我的更新，我希望它能有所帮助

我所做的是将滑块和公文包放在使用

position:relative

和

top:-50px的相同标记中
检查我的更新，我希望它有帮助

我所做的是将滑块和公文包放在使用position:relative
和top:-50px的相同标记中
您使用的引导3网格错误。对于每一行，您必须添加一个行
类；对于行
类中的每一项，您必须使用类列-*-*
。我已经根据您的代码编写了一些新代码，正确使用了引导网格

如果这不好，请告诉我，以及您试图实现的目标。
您使用的引导3网格错误。对于每一行，您必须添加一个行
类；对于行
类中的每一项，您必须使用类列-*-*
。我已经根据您的代码编写了一些新代码，正确使用了引导网格

如果这不好，请告诉我，以及您试图实现的目标。
我给了.container一个固定高度。但由于容器的高度会随产品组合的不同而变化。所以我认为应该有另一种方法？所以最好不要使用绝对位置，而是使用相对位置，并用边距定位容器。我给了。容器一个固定的高度。但由于容器的高度会随产品组合的不同而变化。因此，我认为应该有另一种方法？因此，也许最好不要使用绝对位置，而是使用相对位置，并用边距定位容器。感谢网格使用建议。但这不是我想要的。谢谢你的网格使用建议。但这不是我想要的。谢谢。你刚刚解决了我的问题。但我有一个问题。为什么不在内部div上使用position-absolute并为其指定top:-50px？你直接给top:-50px给相对位置？有什么我应该知道的吗？在我最初的项目代码中，我只删除了position:absolute，并将top:-50px赋予我的相对定位元素，布局得到了修复。我不知道如何解释这一点，让我试试。。。我总是使用绝对位置来表示需要放置在另一个元素正上方的元素，我想这更像是photoshop上的图层。你应该试着把绝对位置放在有相对位置的元素中，然后与没有相对位置的元素进行比较。你刚刚解决了我的问题。但我有一个问题。为什么不在内部div上使用position-absolute并为其指定top:-50px？你直接给top:-50px给相对位置？有什么我应该知道的吗？在我最初的项目代码中，我只删除了position:absolute，并将top:-50px赋予我的相对定位元素，布局得到了修复。我不知道如何解释这一点，让我试试。。。我总是使用绝对位置来表示需要放置在另一个元素正上方的元素，我想这更像是photoshop上的图层。你应该试着把绝对位置放在有相对位置的元素中，然后与没有位置的元素进行比较。嗨。。！！这个解决方案有效。我有一个问题？有没有理由不使用position:absolute？？？因为