确保相关元素内部的内容正常工作
问题描述:
我对position: relative;
有疑问。如果我使用它,那么它内部的所有内容都具有奇怪的宽度,并且它不会针对元素进行缩放。确保相关元素内部的内容正常工作
更好地展示一个例子。在这里,我有一个简单的弹出式导航,当我将鼠标悬停在链接上时显示。
- 我想导航到展示(不低于对方)
解决方案是使用JavaScript和悬停获得链接
你可以注释掉$(this).find('.container').css('left', left);
行来查看我在说什么。
// I don't want to use JavaScript but it seems the only way
$(function() {
$('.link').on('mouseover', function() {
var left = $(this).position().left;
$(this).find('.container').css('left', left);
});
});
// If .link will be "position: relative;" then the red blocks will be positioned wrongly (down)
// If I use JavaScript then... ..well.. then I use JavaScript
.link {
width: 100px;
height: 100px;
background: green;
display: inline-block;
float: left;
margin: 12px;
cursor: pointer;
/* position: relative; */
}
.link:hover .container {
display: block;
}
.link .container {
position: absolute;
left: 0px;
margin-top: 112px;
display: none;
}
.link .container .box {
width: 200px;
height: 200px;
display: inline-block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<div class="link">
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<div class="link">
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
答
您应该删除左:0像素;
.link .container {
position: absolute;
//left: 0px;
margin-top: 112px;
display: none;
}
这是造成该块在外侧容器的左侧被锁定,如果添加的相对位置。链接,它会正确对齐,但问题是,容器将继承其宽度....所以它不会有自动宽度,你想要的。
因此,您要么删除左边,并依靠最外面的容器宽度,或使用JavaScript,因为您需要有一个固定的.container宽度来实现此目的。
+0
好吧,实际上我只需要移除'left:0px;'而没有别的。 – sed
[mcve]在你的问题。有了9K代表,你应该知道这一点。 – j08691
@ j08691有一个评论代码/ CSS的小提琴。我没有把代码放在这里的原因是因为SO不支持SCSS。 – sed
我很清楚这一点。但是,如果jsFiddle消失了呢?或者是下降?或者被我公司的防火墙阻止?您的问题应该包含解决问题*所需的一切*,并且不应要求我们任何人访问第三方网站以查看您的代码示例。 – j08691