相对定位与绝对定位演示
2017-04-10 本文已影响0人
清茶杯
relative与absolute
具体效果为：
Paste_Image.png
]
代码为： <style>
div{
width:200px;
height:200px;
background:yellow;
position:relative;
}
span{
width:50px;
height:50px;
background:red;
text-align:center;
line-height:50px;
position:absolute;
}
.span1 {
left:75px;
}
.span2 {
top:80px;
right:0px;
}
.span3{
top:150px;
left:75px;
}
.span4{
top:80px
}
</style>
</head>
<body>
<div>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
<span class="span4">span4</span>
</div>
