Set the position of the image below



find<div class="header-bottom-inner"></div>Container, punch it inside<img src="images/maozi_03.png" alt="" >The label.

<– During the development of a website, an element is found to be in a special position, and a positioning (absolute positioning) attribute is added to the corresponding element.

position:absolute;

left:0;andtop:0;Is the origin of coordinates. The default origin is the top left corner of the screen.

Left: horizontal movement (relative to the origin of coordinates) Left is a positive number moving to the right;

Top: vertical movement (relative to the origin of coordinates) the value of top is positive moving down;

For an element with absolute positioning, use the upper-left corner of its parent as the origin: add position:relative to the parent element; –>

<img src="images/maozi_03.png" alt="" class="maozi">
Copy the code
.header-bottom-inner{
    width: 965px;
    height: 282px;
    margin: 0 auto;
    padding-top: 65px;
    padding-left: 29px;
    position: relative;
}
Copy the code
.maozi{
    position: absolute;
    left:660px;
    top:-45px;
}
Copy the code

The final code:

<! HTML > < HTML lang="en"> <head> <meta charset=" utF-8 "> <title> </title> *{margin:0; padding:0; } .header{ width:100%; height:491px; background-color:black; } .header-top{ width: 100%; height:144px; background-color: black; } .header-top-inner{ width:994px; height:144px; margin:0 auto; } .logo{ width:451px; height:144px; background-color: blue; float:left; } h1{ width:451px; height:144px; background-image: url(images/logo_02.png); } h1 a{ display:block; width:451px; height:144px; text-indent:-2000px; } .nav{ width:480px; height:144px; float:right; } .nav li{ list-style:none; float:left; font-size: 12px; margin-right: 28px; height: 148px; line-height: 148px; color:#7f7f7f; } .nav .active{ color:#cb2700; } .header-bottom{ width:100%; height:347px; background-image: url(images/2_02.png); } .header-bottom-inner{ width:965px; height: 284px; margin:0 auto; padding-top:63px; padding-left:29px; position:relative; } h3{ color:white; font-size: 24px; margin-bottom: 19px; } p{ width: 586px; color:#7f7f7f; line-height:25px; } p a{ color:#cb2800; } .maozi{ position:absolute; left:660px; top:-39px; } .main{ width:100%; height:896px; background-image: url(images/1_02.png); } .footer{ width:100%; height:124px; background-color: black; } </style> </head> <body> <div class="header"> <div class="header-top"> <div class="header-top-inner"> <div class="logo"> <h1> <a href="#">EaglesTroop</a> </h1> </div> <div class="nav"> <ul> <li class="active">About</li> <li>Foundation</li> <li>Program</li> <li>Leaders</li> <li>Gallery</li> <li>Contacts</li> </ul> </div> </div> </div> <div  class="header-bottom"> <div class="header-bottom-inner"> <h3>Welcome to Eagles Boy Scout Troops! </h3> <p>Eagles is one of <a href="#">free web templates</a> created by Template.com team. It is optimized for 1280x1024  resolution. This <a href="#">Eagles Template </a> goes with two packages-with PSD source files and without them. PSD files are available for the registered members of Template Monster. The basic package(without PSD source) is available for anyone without registration.</p> <img src="images/mauzi_03.png" alt="" class="maozi"> </div> </div> </div> <div class="main"></div> <div class="footer"></div> </body> </html>Copy the code

The final effect: