position的absolute与fixed共同点与不同点
<input type="button" value="请点我"/>
<div class="bg"></div>
<div class="center"></div>
*{margin:; padding:;}
body{height: 6000px;}
.bg{background: #000; opacity:0.5; filter:alpha(opacity=50); width: 100%; height: 100%; top:; left:; position: fixed;}
.center{width: 500px; height: 500px; background: #fff; position: fixed; top:50%; left:50%; margin-left:-250px; margin-top:-250px;}
position的absolute与fixed共同点与不同点的更多相关文章
- 【对比分析四】position的absolute与fixed共同点与不同点
共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absolute的”根元素“是可以设置的 ...
- position的absolute与fixed,absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- position定位-absolute与fixed
1. absolute 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 2. fixed 生成绝对定位元素,相对于浏览器窗口进行定位.
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
随机推荐
- java 导出excel(读数据库案例)
import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet;import java.sql.S ...
- hdu 2993 MAX Average Problem(斜率DP入门题)
题目链接:hdu 2993 MAX Average Problem 题意: 给一个长度为 n 的序列,找出长度 >= k 的平均值最大的连续子序列. 题解: 这题是论文的原题,请参照2004集训 ...
- hdu_5963_朋友(找规律)
题目链接:hdu_5963_朋友 题意: 中文,不解释 题解: 把样例拿出来看看,你会发现以x为节点是否能赢,就是与x相连的边权值的和或者异或是否为奇数. #include<bits/stdc+ ...
- 2016弱校联盟十一专场10.2——Around the World
题目链接:Around the World 题意: 给你n个点,有n-1条边,现在这n-1条边又多增加了ci*2-1条边,问你有多少条欧拉回路 题解: 套用best定理 Best Theorem:有向 ...
- Docker私有仓库3
http://www.cnblogs.com/womars/p/5906435.html(上篇地址) 三.测试上两篇 #测试一下 [root@lh- data]# pwd /opt/data [roo ...
- [kuangbin带你飞]专题四 最短路练习 POJ 3268 Silver Cow Party
题意: 在一个有向图中求n头牛从自己的起点走到x再从x走回来的最远距离 思路一开始是暴力跑dij…… 讲道理不太可能…… 然后就百度了一下 才知道把矩阵转置的话就只需要求两次x的单源最短路…… /* ...
- contenteditable模仿textarea文本框
contenteditable 属性是 HTML5 中的新属性. 例子:<p contenteditable="true" style=" border:solid ...
- 基于C++的顺序表的实现
顺序表,是数据结构中按顺序方式存储的线性表,又称向量.具有方便检索的特点.以下,是笔者学习是基于C++实现的顺序表代码,贴上来当网页笔记用. #include <iostream> usi ...
- CSS3 transform的demo1
<!DOCTYPE html> <html> <head> <title>弹出层演示</title> <meta charset=&q ...
- ejabberd模块开发
参考: http://anders.conbere.org/journal/ http://www.process-one.net/en/wiki/ejabberd_module_developmen ...