CSS相对、绝对位置_Css_Responsive Design_Css Position

CSS相对、绝对位置

css responsive-design

CSS相对、绝对位置,css,responsive-design,css-position,Css,Responsive Design,Css Position,我正在尝试为我发布的图片中的布局设计响应CSS代码。基本上，我必须将正面图片放在图片库的顶部，使用相对和绝对技术，以及的灵活%宽度，带有导航的徽标应该使用相对绝对技术来实现。多谢各位下面是CSS和HTML代码。有人能说出哪一个div应该是绝对的，哪一个是相对的，以实现图像中的布局吗。非常感谢 <body> <div id="wrapper"> <header> <div id="nav"> <ul>

我正在尝试为我发布的图片中的布局设计响应CSS代码。基本上，我必须将

正面图片

放在图片库的顶部

，使用相对和绝对技术，以及

的灵活%宽度，带有导航的徽标应该使用相对绝对技术来实现。
多谢各位

下面是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>

您只需了解“相对”设置了两个属性集的基础，即1:zIndex和2:positions。将“前”设为高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>

所以。。。你尝试了什么，你的问题是什么？如果你是新的HTML/CSS，你可以考虑一个响应框架：没有IM不要求它为我做，我只是尝试了不同的技术，通过分配身体元素相对和休息的div到绝对定位，所有的顶部，正确的值。但它不起作用

<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>