position

1) fixed 固定在页面某个位置

2) absolute 也可以固定在某个位置，一般结合relative使用

注：

1）fixed和absoulue区别，假如一个div固定在右下角。滚动滑轮时，fixed是一直固定在右下角，而absolute是跟着走滑轮走。

2）  
　　<div style="position:relative;">

    　　<div style="position:absolute;top:0;left:0;> <!--这个时候就不是以整个页面固定，而是以父类标签的某个位置固定-->

</div>

absolute示例：固定位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<title></title>

</head>

<body>

    <div style="height: 40px;width: 40px;color: white;position: absolute;right: 0;bottom:0 ">1111</div>

    <div style="height: 5000px;background-color: red"></div>

</body>

</html>

relative+absolute示例：以父类标签的某个位置固定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="height: 200px;width: 500px;border: 1px solid red;position: relative;margin: 0 auto">

       <div style="height: 40px;width: 40px;position: absolute;top:0;right: 0"></div>

    </div>

    <div style="height: 200px;width: 500px;border: 1px solid red;position: relative;margin: 0 auto">

        <div style="height: 40px;width: 40px;position: absolute;bottom:0;left: 0"></div>

    </div>

    <div style="height: 200px;width: 500px;border: 1px solid red;position: relative;margin: 0 auto">

        <div style="height: 40px;width: 40px;position: absolute;top:0;left: 0"></div>

    </div>

</body>

</html>

示例：多层使用

1）使用position固定

2）使用opacity设置透明度

3）z-index设置权重，越大表示越显示在上面

4）position: fixed;top:50%;left: 50% 是以左上角来固定，通过margin-left: -250px;margin-top: -250px;来调整使第三个div居中

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div style="position: fixed;top:50%;left: 50%;z-index: 10;height: 400px;width: 400px;margin-left: -250px;margin-top: -250px;"></div>

<div style="position: fixed;top:0;left: 0;right: 0;bottom:0;opacity: 0.5;z-index: 9"></div>

<div style="height: 5000px;z-index: 8"></div>

</body>

</html>

巴特西

css-position属性实例2

position

absolute示例：固定位置

relative+absolute示例：以父类标签的某个位置固定

示例：多层使用

最新文章

热门文章