Question

对于我的其他作品，我不得不将我的图像重叠到另一个div上。当你打开我的工作时，你会明白，有一个图像是“那就是我！”需要在左侧div重叠。我试过这个：How to overlay one div over another div 但使用position：absolute使我的div消失..

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Mustafa Tosuncu</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <header class="mainHeader">
        <img class="logo" src="img/logo.png"></img>
        <nav><ul>
            <li><a href="index.php">Home</a></li>
            <li><a href="personalia.php">Personalia</a></li>
            <li><a href="opleiding.php">Opleiding</a></li>
            <li><a href="projecten.php">Projecten</a></li>
            <li><a href="contact.php">Contact</a></li>
        </ul></nav>
    </header>
    <div class="mainContent">
        <div class="content">   
                <article class="topcontent">    
                    <header>
                        <h2>Hallo! </h2>
                    </header>
                    <content>
                    <p>Welkom naar mijn portfolio, mijn naam is Mustafa Tosuncu.<br>
                    Op mijn portfolio vindt je informatie over m'n opleiding, werk en over mijzelf.<br> 
                    Veel succes!</p>
                    </content>  
                </article>
                <img class="topbar" src="img/ik.png"></img>
        </div>
    </div>
    <footer class="mainFooter">
        <p>Copyright &copy; 2014 <span class="footerp2">Mustafa Tosuncu<span></p>
    </footer>
</body>
</html>

body {
    background-color: #0F0F0A;
    color: #2E2E2C;
    font-size: 87.5%;
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    }

.body {
    clear: both; 
    margin: 0 auto; 
    width: 70%;
}   

.logo{
    padding: 25px 0 17px 0;
}

h2{
    font-size: 170%;
    font-weight: 400;
    color: #CC0000;
}

.mainHeader nav {
    background: black;
    font-size: 1.143em;
    height: 40px;
    line-height: 30px;
    margin: 0 auto 30px auto;
    text-align: center;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    float: left; 
    display: inline; 
}

.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    display: inline-block;
    height: 30px;
    padding: 5px 23px;
    text-decoration: none;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
    background: #CC0000;
    color: #fff;
    text-shadow: none !important;
}

.mainContent {
    overflow: hidden;
    line-height: 25px;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px; 
}

.content {
    width: 50%;
}

.topcontent {
    background-color: #FFF;
    border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px; 
    padding: 3% 5%; 
    margin-bottom: 2%;
}

.topbar{
    width: 45%;
    float: left;
}

.mainFooter {
    width: 100%;
    float: left;
    margin-top: 2%;
    margin-bottom: 2%;
    padding-left: 0;
    background-color: black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    color: #FFF;    
}

.mainFooter p {
    width: 91%;
    margin: 2% auto;
}

.footerp2{
    color:#CC0000;
}

Answer 1

使用position:relative;代替绝对。然后，您可以使用left:-20px;相对于其正常位置移动它。有关CSS定位及其工作原理的更多信息，请转到W3Schools.com。

Answer 2

使用 position:relative; 在图片上并给left: -30px; 由于您想要在div上重叠图像，因此仅将其应用于图像
上希望它有效

如何将一些图像重叠成div？

2 个答案: