10步学习CSS定位

睿美印象网络欢迎您的到来，并真诚的希望能与您合作！

进入网站

返回上一页

客服QQ

客服QQ

一切从沟通开始……

作者：睿美印象网站建设工作室发布日期：2012-10-01

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>10步学习CSS定位: position static relative absolute float</title>
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css" type="text/css" media="print" />
<style type="text/css" media="screen">
#example {
float:right;
}
#example div {
}
#div-before, #div-after {
background-color:#eee;
color:#000;
}
#div-1 {
width:400px;
background-color:#000;
color:#fff;
}
#div-1-padding {
padding:10px;
}
#div-1a {
background-color:#888;
color:#fff;
}
#div-1b {
background-color:#666;
color:#fff;
}
#div-1c {
background-color:#aaa;
color:#fff;
}
#example div p {
margin:0 .25em;
padding:.25em 0;
}
#description {
float:left;
width:40%;
}
pre {
padding:1em;
border:1px dashed #aaa;
background:#fafafa;
}
p {
margin:0.5em 0;
}
h3 {
color:#999;
}
</style>
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css" type="text/css" title="1" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css" type="text/css" title="2" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css" type="text/css" title="3" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css" type="text/css" title="4" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css" type="text/css" title="5" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css" type="text/css" title="6" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css" type="text/css" title="7" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css" type="text/css" title="8" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css" type="text/css" title="9" media="screen" />
<link rel="alternate stylesheet" href="http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css" type="text/css" title="10" media="screen" />
<script type="text/javascript">
function chooseStyle(title)
{
setActiveStyleSheet(title);
}
var tabberOptions = {
onTabClick:
function(tabIndex)
{
    chooseStyle(tabIndex+1);
}
};
</script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/styleswitcher.js"></script>
<script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.js"></script>
<script type="text/javascript">
/* If the user has javascript, temporarily set the .tabber class to
   display:none */
//document.write(unescape(\%3Cstyle%20type%3D%22text/css%22%3E%0A.tabber%20%7B%20display%3Anone%3B%20%7D%0A%3C/style%3E%0A));
</script>
</head>
<body >
<table id="layout_table" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr valign="top">
    <td id="block_left_kludge"></td>
    <td id="block_middle" width="100%" rowspan="2">
      <div id="content">
        <h1>10步学习CSS定位: position static relative absolute float</h1>
        <div id="description">
          <div class="tabber">
            <div id="text-1" class="tabbertab" title="1">
              <h2>1. position:static</h2>
              <p>元素的 position 属性默认值为:<em>static</em>，即该元素出现在文档的常规位置，不会重新定位。</p>
              <p>通常此属性值可以不设置，除非是要覆盖之前的定义。</p>
              <pre>#div-1 {
position:static;
}
</pre>
            </div>
            <div id="text-2" class="tabbertab" title="2">
              <h2>2. position:relative</h2>
              <p>设置了 <em>position:relative</em>，便可以结合<em>top</em> 、 <em>bottom</em>、 <em>left</em> 、 <em>right</em> 的属性来偏移其文档的常规位置。</p>
              <p>例如将 div-1 向下移动 20 像素、向左移动 40 像素:</p>
              <pre>#div-1 {
position:relative;
top:20px;
left:-40px;
}
</pre>
              <p>注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，<strong>它仍占据原始位置</strong>。</p>
              <p>貌似 <em>position:relative</em> 用处不大(我到觉得这点很有用)，但在后面的内容中显得尤为重要。</p>
            </div>
            <div id="text-3" class="tabbertab" title="3">
              <h2>3. position:absolute</h2>
              <p>设置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p>
              <p>例如将 div-1a 放置到右上角：</p>
              <pre>#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>
              <p>注意！由于 div-1a 被移走, 页面中的其他元素位置也变了： div-1b, div-1c, div-after 都因此上移了。</p>
              <p>div-1a 被放置在页面的右上角。能直接地定位元素很方便，但作用也不大。</p>
              <p>这里真正要做的是将 div-1a <em>相对于</em> div-1 定位，这就又要讲到 relative 属性了。</p>
              <h3>注</h3>
              <ul>
                <li>IE浏览器Bug：设置了相对宽度(如 "width:50%")，该宽度将基于父元素而非自身。</li>
              </ul>
            </div>
            <div id="text-4" class="tabbertab" title="4">
              <h2>4. position:relative + position:absolute</h2>
              <p>设置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p>
              <pre>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
</pre>
            </div>
            <div id="text-5" class="tabbertab" title="5">
              <h2>5. 两列绝对定位</h2>
              <p>接下来使用relative 和absolute 实现两列的绝对定位：</p>
              <pre>#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>
              <p>使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前；</p>
              <p>注意，还有个元素被绝对定位的元素遮住了，怎么办？</p>
            </div>
            <div id="text-6" class="tabbertab" title="6">
              <h2>6. two column absolute height</h2>
              <p>一种办法是设置固定高度。</p>
              <p>但不是万全之策，因为元素的高度、字体的大小并不总是确定的。</p>
              <pre>#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
</pre>
            </div>
            <div id="text-7" class="tabbertab" title="7">
              <h2>7. float(浮动)</h2>
              <p>针对高度不定的情况，绝对定位不好用，于是想到另一方案。</p>
              <p>可以尽量使用向左或向右浮动来实现文字环绕，特别是环绕图片，此处用于更复杂的布局工作(也只有用这种方法)。</p>
              <pre>#div-1a {
float:left;
width:200px;
}
</pre>
            </div>
            <div id="text-8" class="tabbertab" title="8">
              <h2>8. 多列浮动</h2>
              <p>将两列都像左浮动，可以实现两列并列。</p>
              <pre>#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}
</pre>
            </div>
            <div id="text-9" class="tabbertab" title="9">
              <h2>9. 多列浮动后清除浮动</h2>
              <p>将元素浮动后，再使用"clear" 清除浮动，后面内容拉向下。</p>
              <pre>#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}
</pre>
            </div>
            <div id="text-10" class="tabbertab" title="10">
              <h2>10. Disclaimer & Resources</h2>
              <p>These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are <em>many</em>).</p>
              <p>The following page was invaluable:<br />
                <a href="Relatively\">http://www.autisticcuckoo.net/archive.php?id=2004/12/07/relatively-absolute">Relatively Absolute</a></p>
              <p>While you e here check out the following:</p>
              <ul>
                <li><a href="BarelyFitz\">http://www.barelyfitz.com/projects/">BarelyFitz Designs Open-Source Software Projects</a></li>
                <li><a href="BarelyFitz\">http://www.barelyfitz.com/screencast/">BarelyFitz Designs Screencasts</a></li>
              </ul>
            </div>
          </div>
          

        </div>
        
        <div id="example">
          <div id="div-before">
            <p>id = div-before</p>
          </div>
          <div id="div-1">
            <div id="div-1-padding">
              <p>id = div-1</p>
              <div id="div-1a">
                <p>id = div-1a</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
              </div>
              <div id="div-1b">
                <p>id = div-1b</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
              </div>
              <div id="div-1c">
                <p>id = div-1c</p>
              </div>
            </div>
          </div>
          
          <div id="div-after">
            <p>id = div-after</p>
          </div>
        </div>
        
      </div></td>
</tr>
<tr>
    <td></td>
</tr>
<tr valign="top">
    <td colspan="3"></td>
</tr>
</table>
</body>
</html>

转载请注明：睿美印象网站建设工作室www.ruimeiyx.com

分享到：

已有 0 条评论

暂无评论

找网站建设工作室
了解网站制作公司
了解网站建设步骤
寻找网站建设方案
打听做网站的价格
查看网站建设案例
在哪做网站好？
睿美印象网络为您指引答案

此页面上的内容需要较新版本的 Adobe Flash Player。

10步学习CSS定位