Question

我在div中有一个元素，其opacity和scale转换。如果没有悬停在父position: absolute;上，则div元素是不可见的，但只要1.鼠标悬停在父div和/或2上，div就会显示。{{{ 1}}正处于过渡期。

body { padding: 10px }
p { color: #E0E0E0 }
.media-title { color: #E0E0E0 }
.align-left { float: left }
.align-right { float: right }
.post-react {
  opacity: 0.8;
  transition: .45s, transform .45s ease;
  -moz-transition: .45s, transform .45s ease;
  -webkit-transition: .45s, transform .45s ease;
}
.post-react:hover {
  opacity: 1.0;
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari */
  transform: scale(1.01);
}
.post-cat {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.blog-index-date {
  padding-right: 5px;
  color: #999999
}
.blog-readmore {
  margin-top: 105px;
  margin-bottom: 0px;
  padding-bottom: 5px;
}
.media {
	padding: 10px;
	background-color: #404040;
	border-left: 4px solid #00BFFF;
	border-radius: 2px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="media post-react">
      <div class="media-left hidden-xs">
        ...
      </div>

      <div class="media-body">
        <div id="media-heading">
          <h1 class="media-title align-left">Title</h1>
          <p class="blog-index-date align-right">Update Time</p>
        </div>
        <div style="clear: both;"></div>
        <p>Summary</p>
        <p> </p>
        <p class="hype"><b>Read More</b></p>
        <p class="post-cat blog-index-date">Category Name</p>
      </div>
  </div>
</body>

所以我有点难过为什么会发生这种情况，有什么想法吗？谢谢！

Answer 1

实际上，它并非隐形。它出现在页面的最底部，因为absolute属性导致位于第一个祖先div中的div，这就是这里的主体。看看这个

（我在代码上添加了border: 1px solid red;行。）

Answer 2

在.media-body

上添加position : relative;

绝对元素需要一些相对的祖先。

＆＃13;

body {
  padding: 10px
}

p {
  color: #E0E0E0
}

.media-title {
  color: #E0E0E0
}

.align-left {
  float: left
}

.align-right {
  float: right
}

.post-react {
  opacity: 0.8;
  transition: .45s, transform .45s ease;
  -moz-transition: .45s, transform .45s ease;
  -webkit-transition: .45s, transform .45s ease;
}

.post-react:hover {
  opacity: 1.0;
  -ms-transform: scale(1.01);
  /* IE 9 */
  -webkit-transform: scale(1.01);
  /* Safari */
  transform: scale(1.01);
}

.post-cat {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.blog-index-date {
  padding-right: 5px;
  color: #999999
}

.blog-readmore {
  margin-top: 105px;
  margin-bottom: 0px;
  padding-bottom: 5px;
}

.media {
  padding: 10px;
  background-color: #404040;
  border-left: 4px solid #00BFFF;
  border-radius: 2px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.media-body {
  position: relative;
}

＆＃13;

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="media post-react">
    <div class="media-left hidden-xs">
      ...
    </div>

    <div class="media-body">
      <div id="media-heading">
        <h1 class="media-title align-left">Title</h1>
        <p class="blog-index-date align-right">Update Time</p>
      </div>
      <div style="clear: both;"></div>
      <p>Summary</p>
      <p> </p>
      <p class="hype"><b>Read More</b></p>
      <p class="post-cat blog-index-date">Category Name</p>
    </div>
  </div>
</body>

＆＃13;

位置：绝对;只有当鼠标悬停在div上时才可见

2 个答案: