CSS关于POSOTION的问题

最新推荐文章于 2023-06-22 19:38:52 发布

xx_313183373

最新推荐文章于 2023-06-22 19:38:52 发布

阅读量746

点赞数

分类专栏：个人学习记录

个人学习记录专栏收录该内容

12 篇文章 0 订阅

订阅专栏

2017-07-07 CSS关于POSOTION的问题

position是CSS中非常重要的一个属性，通过position属性，我们可以让元素相对于其正常位置，父元素或者浏览器窗口进行偏移。postion也是初学者容易搞不清楚状况的一个属性，本文将从最基础的知识讲起，谈谈关于positon属性的一些理论与应用。

才开始学习CSS，有很多地方都不懂，所以在网上看到大佬的整理，这里进行一下记录。

首先position有四种类型，分别是四种不同的定位方式。

四种类型：
(1)static:
static属性是position的默认值，默认情况下，块级元素和行内元素按照各自的特性进行显示

(2)relative:
relative就是相对定位的意思，元素会根据它的父级元素进行相应的移动，分别可以设置top,bottom,left,right属性，同时它原本的空间也是保留的，其他的元素是根据他的原来的位置进行排列的。

下面看一下测试：HTML代码

<!DOCTYPE HTML>
<html> 
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="relative">
    </div>
    <div></div>
</body>
</html>

CSS代码：

div { 
    background: #0094ff; 
    width: 200px; 
    height: 100px;
}

.relative {
    background: #ff6a00;
    position: relative;
    width: 200px; 
    height: 100px; 
    top:20px;
    left: 20px; 
}

效果图如下：
测试图
可以看到上面的div相对于原来的位置左边有了20px的距离，上面也是有了20px的距离。而下面的div不会根据现在的位置进行排列，而是根据原来的位置。

(3)absolute:
元素设置成absolute后会脱离文档流，并且不占有原本的空间，后面的元素会顶替上去，而且不论元素是行内元素还是块级元素，都会生成一个块级框，也就是例如行内元素span设置了absolute后就可以设置height和width属性了。看下面例子：

HTML代码:

<!DOCTYPE HTML>
<html> 
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <span class="absolute">
    </span>
    <div></div>
</body>
</html>

CSS代码：

div { 
    background: #0094ff; 
    width: 250px; 
    height: 100px; 
}
.absolute { 
    background: #ff6a00; 
    position: absolute;
    width: 200px; 
    height: 100px; 
    top: 50px; 
    left: 50px; 
}

效果图：
测试图
可以看到本来应该在下面的蓝色DIV方块跑到上面来了，而且本来不可以设置width,height属性的span现在可以设置了。

(4)fixed
fixed的表现方式类似于absolute，但是相比于absolute相对于不确定的父元素进行偏移，fixed就是相对于浏览器窗口进行偏移
就好像这个元素被固定在了浏览器上一样，很多网站都有类似的东西
比如这个“分享到” 这里写图片描述他是永远停靠在浏览器右边的，所以我看了一下它的代码如图：

发现他确实是position:fixed，然后用right:0来实现停靠在右边，同时用top来实现居中，然后z-index 应该是为了让它在所有的东西上面把，防止它被其他元素挡住。