Multiple child relative position to parent in CSS
I have a Background and two Clouds images.
I want to move them independently and I want be able to embed the code at any website.
I cannot get the clouds move in an absolute positioning mode, there is one of theme always relative to the other
html code
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="cloud-01" />
<div id="cloud-02" />
</div>
</body>
</html>
css
#wrapper
{
position: relative;
background-image: url('images/background.jpg');
background-repeat: no-repeat;
min-height: 281px;
min-width: 1000px;
}
#cloud-01
{
background-ima开发者_运维问答ge: url('images/cloud.png');
background-repeat: no-repeat;
position: absolute;
left: 150px;
top: 80px;
height: 49px;
width: 102px;
}
#cloud-02
{
background-image: url('images/cloud2.png');
background-repeat: no-repeat;
position: absolute;
left: 150px;
top: 90px;
height: 47px;
width: 114px;
}
Thanks
This:
<div id="wrapper">
<div id="cloud-01" />
<div id="cloud-02" />
</div>
is parsed as/"error corrected" into this:
<div id="wrapper">
<div id="cloud-01">
<div id="cloud-02"></div>
</div>
</div>
If you close the div elements properly, your CSS will work correctly:
<div id="wrapper">
<div id="cloud-01"></div>
<div id="cloud-02"></div>
</div>
加载中,请稍侯......
精彩评论