CSS相对，绝对定位[关闭]答案

【问题标题】：CSS relative, absolute positionings [closed]CSS相对，绝对定位[关闭]
【发布时间】：2012-09-18 05:13:36
【问题描述】：

我正在尝试为我发布的图片中的布局提供响应式 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;
}

【问题讨论】：

那么...您尝试了什么，您的问题是什么？
如果您是 html/css 新手，您可以考虑使用响应式框架：designshack.net/articles/css/…
不，我不是要求为我做这件事，我只是尝试了不同的技术，将 body 元素分配给相对位置，将其余 div 分配给绝对定位，以及所有 TOP、RIGHT 值。有点没用

标签： css responsive-design css-position

【解决方案1】：

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

用相对的块 div 包装元素，使子元素的宽度通过所述块 div 的宽度计算 - 并且还使用包装器左侧/顶部的 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>

【讨论】：