举例详解CSS中position属性的使用

· 教程大全 · 33729

position 这个属性决定了元素将如何定位。它的值大概有以下五种：

每个网页都可以看成是由一层一层页面堆叠起来的，如下图所示。

position 设置为 relative 的时候，元素依然在普通流中，位置是正常位置，你可以通过 left right 等移动元素。会影响其他元素的位置。

而当一个元素的 position 值为 absolute 或 fixed 的时候，会发生三件事：

把该元素往 Z 轴方向移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。
该元素将变为块级元素，相当于给该元素设置了 display: block;（给一个内联元素，如 <span> ，设置 absolute 之后发现它可以设置宽高了）。
如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。
由此观之，当 position 设置为 absolute 或 fixed，就没必要设置 display 为 block 了。而且如果你不想覆盖下层的元素，可以设置 z-index 值 达到效果。

下面来看一下插件的参数用法示例：

1. position:static

所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。

一般来说，不用指定 position:static，除非想要覆盖之前设置的定位。

CSS Code复制内容到剪贴板
  1. #div-1 {   
  2.  position:static;   
  3. }  

2. position:relative

如果设定 position:relative，就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了】

CSS Code复制内容到剪贴板
  1. #div-1 {   
  2.  position:relative;   
  3.  top:20px;   
  4.  left:-40px;   
  5. }  

3. position:absolute

当指定 position:absolute 时，元素就脱离了文档【即在文档中已经不占据位置了】，可以准确的按照设置的 top,bottom,left 和 right 来定位了。

CSS Code复制内容到剪贴板
  1. #div-1a {   
  2.  position:absolute;   
  3.  top:0;   
  4.  rightright:0;   
  5.  width:200px;   
  6. }  

4. position:relative + position:absolute

如果我们给 div-1 设置 relative 定位，那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位，就可以把 div-1a 移动到 div-1 的右上方。

CSS Code复制内容到剪贴板
  1. #div-1 {   
  2.  position:relative;   
  3. }   
  4. #div-1a {   
  5.  position:absolute;   
  6.  top:0;   
  7.  rightright:0;   
  8.  width:200px;   
  9. }  

5. 两栏绝对定位

现在就可以使用相对定位和绝对定位来做一个两栏布局了。

CSS Code复制内容到剪贴板
  1. #div-1 {   
  2.  position:relative;   
  3. }   
  4. #div-1a {   
  5.  position:absolute;   
  6.  top:0;   
  7.  rightright:0;   
  8.  width:200px;   
  9. }   
  10. #div-1b {   
  11.  position:absolute;   
  12.  top:0;   
  13.  left:0;   
  14.  width:200px;   
  15. }  

6. 两栏绝对定位定高

一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。

CSS Code复制内容到剪贴板
  1. #div-1 {   
  2.  position:relative;   
  3.  height:250px;   
  4. }   
  5. #div-1a {   
  6.  position:absolute;   
  7.  top:0;   
  8.  rightright:0;   
  9.  width:200px;   
  10. }   
  11. #div-1b {   
  12.  position:absolute;   
  13.  top:0;   
  14.  left:0;   
  15.  width:200px;   
  16. }  

相关推荐：

css和@import有什么区别

css和@import有什么区别？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、用法（1）link:<linkrel="stylesheet"type="text/css"href=&...

css怎么设置元素位置不变

这篇文章给大家分享的是有关css怎么设置元素位置不变的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。css设置元素位置不变的方法：首先创建一个HTML示例文件；然后定义一个“#ads”的id样式，并设置高度宽度；最后通过“position:fixed”以及right、bot...

怎么用CSS steps()函数实现随机翻牌效果

这篇文章主要介绍“怎么用CSSsteps()函数实现随机翻牌效果”，在日常操作中，相信很多人在怎么用CSSsteps()函数实现随机翻牌效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSSsteps()函数实现随机翻牌效果”的疑惑有所帮助！接下来，请跟着小编...

如何引入CSS的方式

小编给大家分享一下如何引入CSS的方式，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！（1）内嵌式通过<style></style>来书写CSS代码。只能应用于当前网页，不能被其它网页共享。注意：&l...

怎么用CSS滤镜实现颜色渐变翻转效果

本篇内容介绍了“怎么用CSS滤镜实现颜色渐变翻转效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一下是利用CSS滤镜效果实现渐变翻转的代码，有需要的朋友可以参考下。代码如下:<span>...

css如何设置td元素的文本靠上显示

这篇文章将为大家详细讲解有关css如何设置td元素的文本靠上显示，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 在css中，可以利用“vertical-align”属性设置td元素的文本靠上显示，该属性用于设置元素的垂直对齐方式，当属性的值为“text-top”时...

css的td宽度怎么定义与设置

这篇文章主要介绍“css的td宽度怎么定义与设置”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css的td宽度怎么定义与设置”文章能帮助大家解决问题。csstd宽度控制定义与设置使用CSS对html表格td设置宽度样式方法介绍，首先我们知道宽度样式单词为“w...

css中目标伪类有什么用

这篇文章主要介绍了css中目标伪类有什么用，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。在css中，目标伪类是“:target”，语法格式“E:target{css样式}”，它表示选择匹配E的所有元素，且匹配元素被相关URL指向；该选择器...