css-position属性实例2
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的更多相关文章
- 【转载】CSS position属性和实例应用
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- 详解CSS position属性
原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- CSS position 属性
position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...
- CSS position 属性_css中常用position定位属性介绍
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...
- css position属性
absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...
- CSS position属性 标签: css 2016-09-06 15:58 78人阅读 评论(0) 收藏
踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...
- CSS position属性---absolute与relative
详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
- CSS - position属性小结
Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...
随机推荐
- [菜鸟]HTTP 与 HTTPS 的区别
HTTP 与 HTTPS 的区别 分类 编程技术 基本概念 HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式.协作式和超媒体信息系统的应用层协议. 简 ...
- golang curl
/** 1.可设置代理 2.可设置 cookie 3.自动保存并应用响应的 cookie 4.自动为重新向的请求添加 cookie */ package curl import ( "net ...
- Yii框架的原代码
http://www.digpage.com/app_struct.html#index-php
- 浅谈JavaSript中的this
JavaScript的this对初学者来说一直是一个很头疼的问题,因为它的指向刚刚接触的时候往往觉得有点莫名奇妙,这篇博客用实例来概括一下,this代表什么以及如何改变函数的this. 在<Ja ...
- 拿到一个崭新的Linux!
买了服务器,这次买了半年,不能浪费了! 0.准备工作: l查看Ip:ifconfig ip addr 不能上网? 执行以下: vi /etc/sysconfig/network-scripts/if ...
- 【AI科技大本营】
从AutoML.机器学习新算法.底层计算.对抗性攻击.模型应用与底层理解,到开源数据集.Tensorflow和TPU,Google Brain 负责人Jeff Dean发长文来总结他们2017年所做的 ...
- BZOJ 3195 [Jxoi2012]奇怪的道路 | 状压DP
传送门 BZOJ 3195 题解 这是一道画风正常的状压DP题. 可以想到,\(dp[i][j][k]\)表示到第\(i\)个点.已经连了\(j\)条边,当前\([i - K, i]\)区间内的点的度 ...
- 【贪心策略】渡河(river)
“假舟楫者,非能水也,而绝江河.”这句话说的是,借助渡船的人,不是会游水,却能横渡江河. 会游水的人反而不一定能顺利地横渡江河.由于江面风浪很大,他们必须潜泳渡河.这就必须用到氧气瓶.氧气瓶当然是出题 ...
- 【bzoj2669】 cqoi2012—局部极小值
http://www.lydsy.com/JudgeOnline/problem.php?id=2669 (题目链接) 题意 给出一个$n*m$的整数矩阵,其中$[1,nm]$中的整数每个出现一次,有 ...
- 前端学习 -- Css -- 有序列表和无序列表
列表就相当于去超市购物时的那个购物清单, 在HTML也可以创建列表,在网页中一共有三种列表: 1.无序列表 2.有序列表 3.定义列表 无序列表 - 使用ul标签来创建一个无序列表 - 使用li在ul ...