CSS相对绝对位置 [英] CSS relative, absolute positionings
问题描述
我正在尝试为我发布的图片中的布局提供自适应CSS代码。基本上，我必须在图片库< div> 的顶部具有正面图片技术，以及< divs> 的灵活％宽度，带导航徽标应采用相对绝对的技术。
非常感谢。
I'm trying come up with the responsive CSS code for the layout in the picture I posted. Basically, I have to have the front picture on top of the picture gallery <div>, with relative and absolute techniques, as well as flexible % widths for the <divs>, Logo with Navigation should be implemented with relative absolute techniques.
Thank you very much.
这是CSS和HTML代码。有人可以说出哪个div应该是绝对的，哪个是相对的才能实现图像中的布局。
非常感谢
Here is the CSS and HTML code. Can someone tell which div should be absolute and which one relative in order to achieve the layout in the image. Many thanks
<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;
}
推荐答案
您只需要意识到相对设置了两个属性集：1：zIndex和2：位置。
You simply need to realize that a 'relative' sets the base of two property sets, 1: zIndex and 2: positions. Make 'front' a high zindex and position it relatively.
用相对的块div包裹元素，使子项的宽度通过所述块的宽度进行计算- div-并使用包装器左侧/顶部的parentOffset定位它们。
Wrapping the elements with the relative block-div, makes the width of children calculate via the width of said block-div - and also positions them with the parentOffset of left/top of the wrapper.
<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相对绝对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
