CSS相對，絕對定位

-4

我試圖想出我張貼的圖片中的佈局響應CSS代碼。基本上，我必須在圖片庫<div>的頂部有front picture，具有相對和絕對的技術以及<divs>的靈活的％寬度，具有導航的標誌應該用相對絕對技術來實現。
非常感謝。CSS相對，絕對定位

這裏是CSS和HTML代碼。有人可以告訴哪個div應該是絕對的，哪個div是爲了實現圖像中的佈局。非常感謝

和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; 
}

來源

2012-09-26 Linards Berzins

那麼...你有什麼試過，你的問題是什麼？ – sbeliv01

如果你是html/css的新手，你可以考慮一個響應式框架：http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-解釋/ –

沒有即時通訊不要求我這樣做我只是嘗試了不同的技術，通過將正文元素分配給絕對定位的相對和其餘部分，以及所有TOP，RIGHT值。它沒有工作 –

你只需要認識到，一個 '相對' 設置兩個屬性集，1底座：用zIndex和2：位置。使'前'高zindex和相對位置。

使用相對的block-div包裝元素，使得子元素的寬度通過所述block-div的寬度進行計算，並將它們與wrapper的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>

來源

2012-09-26 18:32:11 mschr

謝謝@mschr –

CSS相對，絕對定位

回答

相關問題