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的更多相关文章

  1. 【转载】CSS position属性和实例应用

    目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...

  2. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  3. 详解CSS position属性

    原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...

  4. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  5. CSS position 属性

    position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...

  6. CSS position 属性_css中常用position定位属性介绍

    css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...

  7. css position属性

    absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...

  8. CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏

    踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...

  9. CSS position属性---absolute与relative

    详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html

  10. CSS - position属性小结

    Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...

随机推荐

  1. 4种PHP回调函数风格

    4种PHP回调函数风格 匿名函数 $server->on('Request', function ($req, $resp) use ($a, $b, $c) { echo "hell ...

  2. 提升jmeter自身性能

    JMeter负载测试时使用GUI界面和较多的收集测试结果的监听器容易造成jmeter的性能瓶颈,远程测试时的控制台尤为明显.提升JMeter负载测试时性能的方法如下: 官方的解决办法:http://j ...

  3. 一本通1633【例 3】Sumdiv

    1633:[例 3]Sumdiv 时间限制: 1000 ms         内存限制: 524288 KB [题目描述] 原题来自:Romania OI 2002 求 ABAB 的所有约数之和 mo ...

  4. bzoj 4631: 踩气球 线段树合并

    4631: 踩气球 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 265  Solved: 136[Submit][Status][Discuss] ...

  5. OI中的莫比乌斯反演

    OI中的莫比乌斯反演 莫比乌斯函数 想要学习莫比乌斯反演,首先要学习莫比乌斯函数. 定义 莫比乌斯函数用\(\mu(x)\)表示.如果\(x\)是\(k\)个不同质数的积,则\(\mu(x) = (- ...

  6. 广二模拟赛 Problem A: 青春野狼不做理性小魔女的梦 解题报告

    Problem A: 青春野狼不做理性小魔女的梦 题意 给一个长为\(k\)的序列\(A\)和一个数\(n\),给出一部分\(A_i\)的值,另一部分为\(-1\),代表不知道这个\(A_i\)是多少 ...

  7. JAVA实现组合、排列、重复排列（多层循环）

    1.代码 package com.hdwang; import java.util.ArrayList; import java.util.Arrays; import java.util.List; ...

  8. 解题：LNOI 2014 LCA

    题面 这题有点意思 转化问题,我们把询问区间的点到根链加,再查询询问点到根的权值和就是每个询问的答案. 然后如果你数据结构没学傻只需要差分一下就可以扫一遍出解了 #include<cstdio& ...

  9. chessboard

    题意:n*n的矩阵,m次赋值一个子矩阵为c,最后输出答案. n<=1e3 m<=1e5 解:倒序处理. 拆行处理. 每行内并查集维护未被赋值的地方. 这样每个地方最多被赋值一次,每次修改要 ...

  10. 【洛谷P1087】FBI树

    题目大意:后序遍历 题解:建立二叉树的码风不知道怎么突然跟线段树一样了...当然,这道题不建树也是可以的. 代码如下 #include <bits/stdc++.h> using name ...