Question

我试图将div放在图像上方。正如您在下面的代码中看到的那样，黑色div中间有一个白色方块。

.item {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid #BEBEBE;
  /*  padding: 10px;*/
  margin: 10px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  z-index: 999999999 !important;
  background-color: #000;
}

.itemimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85px;
  margin-top: -8px;
  z-index: 1;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
  </div>
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
  </div>
</div>

我想把这个黑色div放在白色图像上方。我已经搜索了解决方案，但他们都使用绝对和相对定位。我必须保持外部div相对，否则引导网格系统不起作用。非常感谢你的帮助:)

Answer 1

只需将top值设为150%即可。这是100%高度的<div>，加上50%来补偿transform。

请注意，我还添加了一个边框，以便在以下示例中说明这一点：

.item {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid #BEBEBE;
  /*  padding: 10px;*/
  margin: 10px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  z-index: 999999999 !important;
  background-color: #000;
}

.itemimg {
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85px;
  margin-top: -8px;
  z-index: 1;
  border: 1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
  </div>
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
  </div>
</div>

Answer 2

简而言之，您不能将position块或内联的子元素放在其父级之下。您需要为图片添加同级<div>。

我理解正确您希望在图像上添加叠加层。请参阅更新示例，其中红色叠加层位于图像和项目上方。我还评论了不必要的CSS规则：

＆＃13;

.item {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 5px;
  border: 1px solid #BEBEBE;
  /*  padding: 10px;*/
  margin: 10px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  /*z-index: 999999999 !important;*/
  background-color: #000;
}

.itemimg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 85px;
  margin-top: -8px;
  /*z-index: 1;*/
}

.overlay {
  position: absolute;
  background: red;
  opacity: 0.5;
  width: 100%;
  height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
    <div class="overlay"></div>
  </div>
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
    <div class="overlay"></div>
  </div>
</div>

＆＃13;

Answer 3

据我了解，你不想展示＆＃34;白盒＆＃34;这就是为什么你躲在＆＃34;黑盒子＆＃34;。如果我是对的，那么为什么不使用＆＃34; left＆＃34;位于负范围内以隐藏它。

＆＃13;

    .item {
      position: relative;
      width: 110px;
      height: 110px;
      border-radius: 5px;
      border: 1px solid #BEBEBE;
      /*  padding: 10px;*/
      margin: 10px 20px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
      z-index: 999999999 !important;
      background-color: #000;
    }

    .itemimg {
  position: absolute;
  top: 50%;
  left: -500%;
  transform: translate(-50%, -50%);
  height: 85px;
  margin-top: -8px;
  z-index: -1651651651;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
  </div>
  <div class="item">
    <img src="https://vignette.wikia.nocookie.net/epicrapbattlesofhistory/images/4/4f/White_square.jpg" class="itemimg">
  </div>
</div>

＆＃13;

Answer 4

好的，所以我弄清楚我做错了什么。我在点击时试图获取div元素的ID。我的jQuery代码是错误的。这是我使用的代码：

    $(document).ready(function() {
        $(".item").click(function() {
           var itemid = jQuery(this).attr("id");
           console.log(itemid);
        });
      });

将div放在引导行内部的图像上方

4 个答案: