javascript - div的滚动条问题
四个p被包裹在id="tzgp"的p下，但是这四个p是相对于body进行的绝对定位，如何让外层的p出现滚动条，使超出部分的p可以滚动显示。
我试过给外层p添加overflow：scroll的样式，貌似没效果，因为内层p是相对body定位的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
body{
position: relative;
}
#tzgp #tzg1{
position: absolute;
left: 0px;
top: 0px;
}
#tzgp #tzg2{
position: absolute;
left: 400px;
top: 0px;
}
#tzgp #tzg3{
position: absolute;
left: 800px;
top: 0px;
}
#tzgp #tzg4{
position: absolute;
left: 1200px;
top: 0px;
}
</style>
<body>
<p id="tzgp">
<p id="tzg1" style="width: 400px; height: 200px; background-color: blue;"></p>
<p id="tzg2" style="width: 400px; height: 200px; background-color: yellow;"></p>
<p id="tzg3" style="width: 400px; height: 200px; background-color: green;"></p>
<p id="tzg4" style="width: 400px; height: 200px; background-color: red;"></p>
</p>
</body></html>
