Question

我正在尝试为我发布的图片中的布局提供响应式CSS代码。基本上，我必须在图片库front picture之上使用<div>，使用相对和绝对技术，以及<divs>的灵活％宽度，应该实现带导航的徽标用相对绝对的技术非常感谢你。

这是CSS和HTML代码。有人可以告诉哪个div应该是绝对的，哪个是相对的，以便在图像中实现布局。非常感谢

<body>
    <div id="wrapper">
<header>
<div id="nav">
    <ul>
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">About</a></li>
    </ul>
</div>
<div id="logo">
    <h1>Welcome to Origin Cards!</h1>
    <img src="images/Logo.jpg" width="150" height="100"/>
</div>    
</header>
<div id="paragraph">
<p>
    <img src="images/Logo.jpg" />
</p>
</div>
<div id="paragraph2">
    <p>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
   content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum 
   as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
   have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like
   </p>
   </div>
<footer>
<ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">News</a></li>
    <li><a href="contact.asp">Contact</a></li>
    <li><a href="about.asp">About</a></li>
</ul>
 </footer>
</div>


</body>
</html>

和CSS：

body {
font-size: 1em;
border: solid red;
width: 80%; 
margin: 0 auto;
border-radius: 6px; 
list-style: none;   
}

#wrapper{
width: 100%;
background: yellow; 
position: relative;
}



#logo {
float: right;
}


#nav {
list-style: none;
}

#nav li {
float: left;
list-style: none;
}

#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
}

#nav li a:hover {
color: #c00;
background-color: #fff; 
}


#paragraph {
width: 30%;
top: 10%;
left: 20%;
z-index: 1;
position: absolute;
}

#paragraph2 {
width: 80%; 
background: #332211;
top: 20%;
left: 10%;
position: absolute;
}

img {
max-width: 100%;
}

footer {

margin: 0 auto;
width: 100%;
background: #123456;
}

Answer 1

你只需要意识到'亲戚'设置了两个属性集的基础，1：zIndex和2：position。将'front'设为高zindex并相对定位。

使用相对block-div包装元素，使子元素的宽度通过所述block-div的宽度计算 - 并且还将它们与包装器的left / top的parentOffset一起定位。

<div style="position:relative; display: inline; display:block; overflow: hidden; clear: both;">
  <div class=front style="position:absolute;left:XXX %; width: 15%; z-index: 100;"></div>
  <div class=other style="width: 100%; z-index: 10">
    <span />         <!-- ,,,, -->
    <ol><li /></ol>
  </div>
</div>

CSS相对，绝对定位

1 个答案: