位置相对和溢出隐藏答案

【问题标题】：Position relative & overflow hidden位置相对和溢出隐藏
【发布时间】：2011-04-26 14:43:35
【问题描述】：

我正在尝试在 JQuery 中做一个简单的 div 切换器，但我遇到了一些 CSS 问题。

基本上，我有一个固定宽度为 650 像素的容器，并且该容器内的 n 个 div 都具有可变宽度。

因为我正在做一个左/右效果，所以我有一个带有溢出的容器：隐藏，这样当它们位于屏幕左侧时，我可以隐藏 div 的内容。

我的问题是，一旦容器设置为溢出：隐藏，屏幕上不会显示任何内容。

这是我的代码

<div class="container">
    <div class="somechild">variable height</div>
    <div class="somechild">variable height</div>
</div>

还有 CSS

.container{
  position: relative;
  width: 650px;
  overflow: hidden;
}

.somechild{
  position: absolute;
  display: none;
}

谢谢

【问题讨论】：

您希望看到什么？您的子 div 有 display: none;
它们在一些 JS 中变得可见。一次只能看到一个孩子
然后明确设置容器 div 的高度，否则你将有一个 0 高度的 div - 你将看不到任何东西......
嗯，这就是我一直在做的，但我想知道他们是否是在 CSS 中做到这一点的一种干净的方式......
要么不隐藏溢出，要么适当设置容器的大小，简单。

标签： css

【解决方案1】：

试试这个：

.container{
   position: relative;
   width: 650px;
   height: 30px;
   overflow: hidden;
}

在子元素上显示 none 意味着父 div 实际上不包含任何内容，因此它的高度为 0。将子元素设置为可见不会自动更改高度，因此您需要预先在 CSS 中进行设置，或者在将子元素设置为可见时以编程方式进行设置。

【讨论】：

【解决方案2】：

我注意到您不必指定固定宽度/高度即可使overflow: hidden; 正常工作。您所要做的就是使用display: block; 或display: inline-block; 就可以了。

这是我为自己的项目制作的带有滑入式动画的按钮的示例代码：http://codepen.io/anon/pen/WbgJgm

HTML：

<a href="#"><span>Hello</span></a>

少：

a {
  text-decoration: none;
  color: blue;

  span {
    display: inline-block;
    overflow: hidden;
    position: relative;
      z-index: 1;
      padding: 10px 15px;
    border: 1px solid blue;

    &:after {
      content: "";
      position: absolute;
        top: 0; left: -100%;
        z-index: -1;
      width: 100%; height: 100%;
      background: blue;
      -webkit-transition: left 0.1s ease;
      -moz-transition: left 0.1s ease;
      transition: left 0.1s ease;
    }
  }
  &:hover {
    span {
      &:after {
        left: 0;
      }
    }
  }
}

【讨论】：