Question

首先，我很抱歉我的丑陋的英语 OTL。

直到，没问题，.single-post__title被主要内容隐藏。因为.main-content溢出：隐藏！ x轴和y轴全部！

但是，我希望看到.single-post__title然后我改变.main-content的溢出：隐藏到 - ＆gt;＆gt;＆gt; overflow-x：hidden＆amp;溢出-y：可见。

这就是结果......

为什么？，以及我应该做些什么来展示.single-post__title ???

---更新01 添加jsfiddle - ＆gt; https://jsfiddle.net/MR_RPF/zayewjjq/

.container {
  width: 400px;
  background-color: red;
  overflow-x: hidden;
  overflow-y: visible;
}
.inner {
  background-color: blue;
  padding: 30px;
}
.title {
  background: pink;
  margin-top: -36px;
  height: 40px;
}

<div class="container">
  <div class="inner">
    <div class="title">
      HELLOW WORLD
    </div>
  </div>
</div>

- 更新02 我想看到的是这个。

Answer 1

在这种情况下，班级single_post_title是罪魁祸首。不要将颜色设置为白色并正确设置高度和边距。

.single-post__title {
    margin-bottom: 0;
    height: 47px;
    margin-top: 10px;
}

Answer 2

请尝试下面的CSS

.single .main-content {
    margin-top: -272px;
    overflow-x: hidden;
    background: transparent;
    border: none;
    overflow-y: visible;
}
.main-content .inner {
    margin-top: 184px;
    background: #fff;
}
.single-post__title {
    margin-bottom: 0;
    height: 150px;
    margin-top: -138px;
    color: white;
}

我在控制台中修改了css检查下面的截图

Answer 3

尝试在.main-content

中添加相对位置

.single .main-content{
  position:relative;
}

然后在.single-post__title中添加绝对位置。

.single-post__title{
  position:absolute; 
}

希望它有用

css overflow-x：hidden ----＆gt;隐藏y轴溢出（我做溢出-y：可见）

3 个答案: