使用CSS定位div元素

我似乎总是遇到CSS布局问题。在页面上放置'div'元素的最佳方法是什么？例如我创建了以下内容：使用CSS定位div元素

见我的jsfiddle：http://jsfiddle.net/JJw7c/3/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Example</title> 
</head> 
<body> 
    <div class="container"> 
     <div class="header"> 
      this is the header 
      <div class="menu"> 
       menu goes here 
      </div> 
     </div> 
     <div class="main"> 
      main content goes here 
     </div> 
    </div> 
    <div class="footer"> 
     footer 
    </div> 
</body> 
</html> 

body 
{ 
    margin:10px; 
} 
.container 
{ 
    border:1px solid black; 
    min-height:400px; 
    width:100%; 
} 

.header 
{ 
    border:1px solid red; 
    height:100px; 
} 

.menu 
{ 
    border:1px solid green; 
    height:20px; 
    width:50%; 
    float:right; 
} 

.main 
{ 
    border:1px solid grey; 
    min-height:100px; 
    margin:20px; 
} 

.footer 
{ 
    border:1px solid green; 
    width:100%; 
    padding-top:10px; 
}

可以说，我想标题的右下角中的位置的图标，但我想是具体的。

我是否使用相对于顶部的位置：20px等等。或者位置：绝对？或者我使用margin-right：200px？或者我可以使用浮动，然后定位绝对？ < < <请你可以解释一下我什么时候可以使用这些，如果可能的话更新我的每个例子的jsfiddle。

感谢

来源

2012-05-15 SOLDIER-OF-FORTUNE

也许首先了解一些关于CSS定位;-) http://www.barelyfitz.com/screencast/html -training/css/positioning /。如果你想定位一个图标，你应该使用'position：absolute'，前提是周围的容器有'position：relative'。 – Gatekeeper

使用

position:absolute; 
bottom:0px; 
right:0px;

的图标类，并添加position:relative;到.header

来源

2012-05-15 08:31:18

为什么我们要添加相对于标题的位置？ –

，因为绝对定位元素的坐标总是被引用到第一个非静态父元素（所以图标被锚定到标题） – fcalderan

你可以使用位置absolute + relative
分配position: relative到.header元素，然后内使用position: absolute添加图标：top和施加到图标left财产的尊重将交由header元素（因为它是图标的第一个非静态元素父项）

该技术的主要优点是，图标的存在不会影响头部内其他元素的位置（因为是绝对位置ED）

来源

2012-05-15 08:28:42 fcalderan

任何人都可以解释downvote？这是相同的答案（后发布）与2 upvotes ... – fcalderan

我投票决定摆脱减号。有些人可能不明白你的意思。 –

使用CSS定位div元素

回答

相关问题