Question

我遇到了一张问题，其中2张照片留在另一张照片上。我试图让飞机停留在云层之上。但是，即使我设置了位置和z-index，他们仍然保持一个接近另一个。

如何让飞机停留在云层之上？

谢谢！

HTML：

<html>
<body>
    <div id="main">
        <div id="header">
            <img id="logo" src="images/logo.png" />
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Oferte Turism</a></li>
                <li><a href="">Despre noi</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
        <div id="body">
            <div id="leftup">
                <img id="cloud" src="images/cloud.png" />
                <img id="plane" src="images/plane.png" />
        </div>
        <div id="form"></div>
        <div id="offers"></div>
    </div>
    <div id="body2"></div> 
    <div id="footer"></div>
    </div>
</body>
</html>

CSS：

body {margin:0;
        padding:0;
        }

#body {height: 900px;
        background-image: url('images/headerbg.png');
        }


#main {width: 960px;
        margin: 0px auto;
        }

#header {height: 80px;
        background-image: url('images/hd.png');
        background-repeat: no-repeat;
        }

ul   { list-style-type: none;
        font-family: Verdana;
        font-size: 14px;
        }

li  { display: inline;
        padding:20px;
        float:left;
        margin-left: 35px;
        }

li a {  text-decoration:none;
        color:white;
        font-style:bold;      <!-- NO BOLD -->
        }

li a:hover { text-decoration:underline;
        }

#logo {margin-left: 30px;
        float:left;
        }       

#leftup {clear:both;
        float:left;
        margin-top:50px;
        }

#cloud {width:250px;
        position:relative;
        z-index:1;
        }

#plane {width:250px;
        position:relative;
        z-index:10;
        }

#form {float:right;
        border: solid 1px blue;
        height:200px;
        width: 100px;
        margin-right:30px;
        }

#offers {border: solid 1px yellow;
        clear:both;
        margin: 100px auto;
        height: 300px;
        width: 500px;}![enter image description here][2]

#body2  { height:600px;
        background-image: url('images/bodybg.png');
        }

#footer {height: 100px;
        background-image: url('images/footerbg.png');
        }

z-index，position和float的问题

0 个答案: