Question

我正在尝试在标签中显示侧边栏内容，我需要动态使用高度，因为它取决于内容。标签的上方和下方元素重叠。删除了CSS属性：position: absolute;，这次第二个div落到了底部。

.tabs {
  position: relative;
  margin: 40px auto;
  width: 100%;
}

.tabs input {
  position: absolute;
  z-index: 1000;
  width: 120px;
  height: 40px;
  left: 0px;
  top: 0px;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  cursor: pointer;
}

.tabs input#tab-2 {
  left: 120px;
}

.tabs input#tab-3 {
  left: 240px;
}

.tabs input#tab-4 {
  left: 360px;
}

.tabs label {}

.tabs label {
  font-size: 15px;
  line-height: 40px;
  height: 40px;
  position: relative;
  padding: 0 20px;
  float: left;
  display: block;
  width: 80px;
  color: #385c5b;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}

.tabs label:after {
  content: '';
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  display: block;
}

.tabs input:hover+label {
  background: #5ba4a4;
}

.tabs label:first-of-type {
  z-index: 4;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
}

.tab-label-2 {
  z-index: 3;
}

.tabs input:checked+label {
  background: #fff;
  z-index: 6;
}

.clear-shadow {
  clear: both;
}

.content {
  background: #fff;
  position: relative;
  width: 100%;
  z-index: 5;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.1);
  border-radius: 0 3px 3px 3px;
}

.content div {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 40px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity linear 0.1s;
  -moz-transition: opacity linear 0.1s;
  -o-transition: opacity linear 0.1s;
  -ms-transition: opacity linear 0.1s;
  transition: opacity linear 0.1s;
}

.tabs input.tab-selector-1:checked~.content .content-1,
.tabs input.tab-selector-2:checked~.content .content-2,
.tabs input.tab-selector-3:checked~.content .content-3,
.tabs input.tab-selector-4:checked~.content .content-4 {
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity ease-out 0.2s 0.1s;
  -moz-transition: opacity ease-out 0.2s 0.1s;
  -o-transition: opacity ease-out 0.2s 0.1s;
  -ms-transition: opacity ease-out 0.2s 0.1s;
  transition: opacity ease-out 0.2s 0.1s;
}

.content div h2,
.content div h3 {
  color: #398080;
}

.content div p {
  font-size: 14px;
  line-height: 22px;
  font-style: italic;
  text-align: left;
  margin: 0;
  color: #777;
  padding-left: 15px;
  font-family: Cambria, Georgia, serif;
  border-left: 8px solid rgba(63, 148, 148, 0.1);
}

<aside class="right-sidebar">

  <ul id="sidebar">
    <section class="tabs">
      <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
      <label for="tab-1" class="tab-label-1">About</label>

      <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
      <label for="tab-2" class="tab-label-2">Services</label>

      <div class="clear-shadow"></div>

      <div class="content">
        <div class="content-1">
          <h2>About us</h2>
          <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on
            each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't
            hold a candle to man.</p>
          <h3>How we work</h3>
          <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not
            rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
        </div>
        <div class="content-2">
          <h2>Services</h2>
          <p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when
            you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
          <h3>Excellence</h3>
          <p>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not
            rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price. </p>
        </div>
      </div>

    </section>
    <p>
      Sample Text
    </p>
    <h3>
      Sample Header
    </h3>
  </ul>
</aside>

Answer 1

您只需要添加相对于已检查内容的位置：

＆＃13;

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity ease-out 0.2s 0.1s;
  -moz-transition: opacity ease-out 0.2s 0.1s;
  -o-transition: opacity ease-out 0.2s 0.1s;
  -ms-transition: opacity ease-out 0.2s 0.1s;
  transition: opacity ease-out 0.2s 0.1s;
  position:relative;
}

＆＃13;

Updated fiddle

如果我使用位置绝对元素是重叠的

1 个答案: