CSS定位

最新推荐文章于 2025-12-25 22:55:50 发布

翻译最新推荐文章于 2025-12-25 22:55:50 发布 · 384 阅读

文章标签：

#css #position #float

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文深入探讨CSS定位(position)属性的用法，包括static、relative、absolute、fixed四种定位方式，以及如何通过position属性实现元素的对齐、裁剪、浮动定位等布局技巧。文章还展示了如何使用CSS创建水平菜单、不使用table创建表格布局、以及如何让包围元素在视觉上包围浮动元素等实际应用案例。

CSS定位 [position]

通过使用position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。

position属性的含义：

属性值	含义
static	默认类型，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative	元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute	元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

对于各个取值的含义：

属性类型	描述
static	默认值。没有定位，元素出现在正常的流中（忽略top, bottom,left,right或者z-index声明）。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20”会向元素的LEFT位置添加20像素。
absolute	生成绝对定位的元素，相对于最近的已定位祖先元素进行定位。如果不存在已定位的祖先元素，那么相对于最初的包含块。最初的包含块可能是画布或HTML元素。元素的位置通过”left”,”top”,”right”以及”bottom”属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过”left”,”top”,”right”以及”bottom”属性进行规定。

将图像与文字进行底部对齐：

img { vertical-align:text-bottom }

裁剪一幅图像：

img 
{
    position:absolute;
    clip:rect(0px 50px 200px 0px) <!-- 裁剪成一个矩形 -->
}

在正文的下方放置一幅图像：

img.x
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1; <!-- 将图像放置在z轴下方 -->
}

使用滚动条显示溢出的内容：

div 
{
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow: scroll <!-- 使用滚动条显示溢出内容，如果不设置，则溢出内容会显示在区域之外，也可设置为'auto' -->
}

浮动定位 [float]

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
将段落的首字母特殊显示：

<html>
<head>
<style type="text/css">
span
{
    float:left;
    width:0.7em;
    font-size:400%;
    font-family:algerian,courier;
    line-height:80%;
}
</style>
</head>

<body>
<p>
    <span>T</span>his is some text.
    This is some text. This is some text.
</p>

<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>

</body>
</html>

创建水平菜单:

<html>
<head>
<style type="text/css">
ul
{
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
}
li {display:inline}

a
{
    float:left;
    width:7em;
    text-decoration:none;
    color:white;
    background-color:purple;
    padding:0.2em 0.6em;
    border-right:1px solid white;
}
a:hover {background-color:#ff3300}

</style>
</head>

<body>
<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>

</body>
</html>

不使用table创建表格布局的首页：

<html>
<head>
<style type="text/css">
div.container
{
    width:100%;
    margin:0px;
    border:1px solid gray;
    line-height:150%;
}
div.header,div.footer
{
    padding:0.5em;
    color:white;
    background-color:gray;
    clear:left; <!-- 防止左边围绕浮动框，强制(footer)在新的一行进行布局 -->
}
h1.header
{
    padding:0;
    margin:0;
}
div.left
{
    float:left;  <!-- 布局的关键 -->
    width:160px;
    margin:0;
    padding:1em;
}
div.content
{
    margin-left:190px;
    border-left:1px solid gray;
    padding:1em;
}
</style>
</head>
<body>

<div class="container">

<div class="header"><h1 class="header">W3School.com.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>

</body>
</html>

如何让包围元素在视觉上包围浮动元素？

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>

上述代码中，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。

可通过强制添加一个空元素并清理(clear)它，如：

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
    <div class="clear"></div>    <!-- 添加一个空元素，并强制在新一行插入 -->
</div>

还有一种办法，就是对容器div进行浮动：

.news {
  background-color: gray;
  border: solid 1px black;
  float: left;  <!-- 对div进行浮动处理 -->
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div class="news">
    <img src="news-pic.jpg" />
    <p>some text</p>
</div>