1
我試圖顯示標籤中的側邊欄內容，我需要動態使用高度，因爲它取決於內容。上方和下方標籤的元素重疊。刪除了CSS屬性：position: absolute;，此時秒數降到最低。如果我使用的位置絕對元素重疊
.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>
您需要學習正確縮進，這會使您的代碼更容易維護。我注意到的一件事是，你已經將你的一切內容包裹在一個ul中 - 這是無效的html，ul的唯一子元素是一個li – Pete
我不知道這一點。我會記住它的。 –