Question

我对position: relative;有疑问。如果我使用它，那么它内部的所有内容都有奇怪的宽度，并且它不会在元素方面进行缩放。

更好地展示一个例子。这里我有一个简单的弹出式导航，当我将鼠标悬停在链接上时会显示。

我希望导航显示在链接
我希望下面的导航项正确定位（不要在彼此之下）

解决方案是使用JavaScript并在悬停时获取链接的位置并将基础元素放置到正确的位置。我不太喜欢这种做法，所以我想知道是否有不同的方式。

您可以注释掉$(this).find('.container').css('left', left);行，看看我在谈论什么。

＆＃13;

// 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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

小提琴：https://jsfiddle.net/qkgvrtnn/

Answer 1

你应该删除左边：0px;

.link .container {
  position: absolute;
  //left: 0px;
  margin-top: 112px;
  display: none;
}

导致块被锁定在外部容器的左侧，如果将相对位置添加到.link，它将正确对齐，但问题是容器将继承其宽度....所以它不会有你想要的自动宽度。

所以你要么删除左边并依赖最外面的容器宽度，要么使用javascript，因为你需要有一个固定的.container宽度才能达到这个目的。

确保相对元素内的内容表现正常

1 个答案: