我正在CSS-tricks上创建一个纯CSS标签区域。唯一的问题是，当选择更大的区域时，下面的内容不会向下移动。 div位置：div位置内的绝对位置：relative。认为这对于选项卡区域的运行是必要的，我认为因为它被包装在相对div中，所以这不会与以后的内容重叠。
请问我可以建议如何编辑它以防止以后的内容重叠？谢谢！
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: #000;
color: #fff;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
display: block;
}
[type=radio]:not(:checked) ~ label ~ .content {
display: none;
}
* {
margin: 0;
padding: 0;
}
body {
background: #999;
}
#page-wrap {
width: 960px;
margin: 100px auto;
}
#test {
width: 100%;
text-align: center;
color: #fff;
font-size: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Pure CSS Tabbed Areas</title>
<link rel='stylesheet' href='css/style.css'>
</head>
<body>
<div id="page-wrap">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<table>
<tbody>
<tr>
<td align="center" valign="top" width="175">
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/PayPal_logo_150x65.gif" alt="" border="0">
</td>
<td width="598">
PayPal is our preferred method of payment for UK & overseas customers as it is quick & easy for you and for us.
</td>
</tr>
<tr>
<td align="center" valign="top" width="175">
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/phonepay.jpg" alt="" border="0">
</td>
<td width="598">If you prefer not to pay online we accept Credit & Debit card payments over the telephone. Please call us on <strong>---</strong> Monday to Friday between 9am & 4pm UK time. We will need your eBay User ID or an Item Number to find your order. We accept all major Credit & Debit cards except American Express.
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<table>
<tbody>
<tr>
<td align="center" valign="top" width="175">
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/rm.jpg" alt="" border="0">
<br><br>
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/specdel.jpg" alt="" border="0">
<br><br>
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/airmail.jpg" alt="" border="0">
<br><br>
<img src="http://www.zestclothing.co.uk/ebay_stores/1066sales/custom_pages/parcelforceww.jpg" alt="" border="0">
</td>
<td width="598">
The majority of our prices include standard UK delivery, this will normally be by the Royal Mail 48, Royal Mail Tracked 48 or Royal Mail 48 Signed For services. For multiple orders that have been paid for individually we may combine orders into one package so you receive all your items together.
<br><br>
We realise that when you place an order you want it now not in a weeks time! We aim to post items the same day we receive cleared payment Monday to Friday, otherwise we post items the next working day. We post orders in plain plastic mailing bags or boxes. When your order is dispatched we will send you an email to let you know. Royal Mail collect from us each weekday afternoon and most UK customers receive their orders within two days. Please check our feedback to see what customers say about the speed of our delivery.
<br><br>
If you need guaranteed next day delivery we can send your order by Royal Mail Special Delivery which will be delivered by 1pm.
<br><br>
We ship worldwide by Royal Mail Airmail and Parcel Force Worldwide so please contact us for a price to your country.
<br><br>
Overseas buyers are responsible for any tax & import duty charged when goods are imported to your country.
<br><br>
If you want to collect your order from our warehouse in Rye, East Sussex we are happy to accommodate, please email cs@zestclothing.co.uk to arrange a convenient time.
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>We realise that clothing sizes differ from one manufacturer to another so if your purchase does not fit we can help you to find an alternative size or product. We are happy to exchange items within 30 days of purchase providing that they are returned in the same condition as when they left us with all the tags and packaging.
<br><br>
There is no need to contact us before returning an item.
<br><br>
If you post an item to us then please include the original paperwork or a copy. Please write on the paperwork the reason for return & whether you would like an alternative size, an alternative product or a refund. Please post returns to:</p>
<table>
<tbody>
<col width="30px" />
<col width="742px" />
<tr>
<td>
</td>
<td>
<strong>---<br>
---<br>
---<br>
---<br>
---<br>
---<br>
---</strong>
<br><br>
</td>
</tr>
</tbody>
</table>
<p>We recommend that you obtain a free proof of posting from the Post Office when sending returns. Customers are responsible for the return postage cost.</p>
</div>
</div>
</div>
</div>
<div id="test">
<p>This should move down, but it gets covered!</p>
</div>
</body>
</html>