CSS的Position tatic,relative,absolute,fixed。
2016-03-16 16:29
417 查看
好多年没有理解,今天决定要学一学。
具体是这样子的。
文档流:有的元素是换行的,比如div.有的元素是不换行的,比如span.(学艺不精害一生啊)
那么一份文档就是按照这样的排出来的。
absolute,fixed:是脱离文档流的,意思就是不是层了。不在一个流了。
relative,是不脱离文档流的。这个流进文档中,然后根据他设置的位置进行调整。而他刚流进文档时的位置还在,不可被其他元素占领。
absolute相对是父元素的相对定位。一般会设置他的层数,Z-index
fixed是相对于浏览器窗口的相对定位。一般会设置他的层数,Z-index
就是这样子,其实很简单的。
拷贝别人的代码,ice-cream http://ice-cream.iteye.com/blog/answered_problems 结合自己的代码,贴出来大家参考一下。欢迎留言。
具体是这样子的。
文档流:有的元素是换行的,比如div.有的元素是不换行的,比如span.(学艺不精害一生啊)
那么一份文档就是按照这样的排出来的。
absolute,fixed:是脱离文档流的,意思就是不是层了。不在一个流了。
relative,是不脱离文档流的。这个流进文档中,然后根据他设置的位置进行调整。而他刚流进文档时的位置还在,不可被其他元素占领。
absolute相对是父元素的相对定位。一般会设置他的层数,Z-index
fixed是相对于浏览器窗口的相对定位。一般会设置他的层数,Z-index
就是这样子,其实很简单的。
拷贝别人的代码,ice-cream http://ice-cream.iteye.com/blog/answered_problems 结合自己的代码,贴出来大家参考一下。欢迎留言。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="charset=utf-8"> <title>position</title> <style type="text/css"> <!-- body{ font-size:12px; margin:0 auto; } div#demo{ position:relative; border:1px solid #000; margin:50px; top:-50px; line-height:18px; overflow:hidden; clear:both; height:1%; } div#sub{ position:absolute; right:10px; top:10px; } div.relative{ position:relative; left:400px; top:-20px; } div.static,div.fixed,div.absolute,div.relative{ width:300px; } div.static{ background-color:#bbb; position:static; } div.fixed{ background-color:#ffc0cb; } div.absolute{ background-color:#b0c4de; } div.relative{ background-color:#ffe4e1; } div.fixed2{ position:fixed; right:40px; top:100px; height:400px; background-color:#b0c4de; } --> </style> </head> <body> <div id="demo"> <div class="static">static: 默认值。无特殊定位,对象遵循HTML定位规则 </div> <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div> <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。这是我拷贝那位大神的,他没有怎么测试他,我也没有测试。关于fixed用法我用fixed2测试 </div> <div class="relative">relative:对象不可层叠,但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div> <div>我上面的元素ralative在流中,我没有紧挨着fixed</div> <div class="fixed2">我是fixed2元素,我是相对于浏览器窗口定位的</div> <div>我上面的元素,已经不在流中了,你看我把他的位置抢了。他身高400呢,他要在,我肯定被挤到页面中部了</div> </div> </body> </html>
相关文章推荐
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
- 6、CSS基础 part-4
- 关于CSS浮动float属性的了解及清除浮动的方式
- CSS3新特性学习
- Retina视网膜屏中CSS3边框图片像素虚边的问题
- css3d总结
- 神奇!js+CSS+DIV实现文字颜色渐变效果
- AlertDialog常用的一些样式
- js兼容性之css的float
- css布局的相关几个难点
- 5、CSS基础part-3
- 轻松搞定各版本IE兼容问题,IE6,IE7,IE8,IE9,IE10,IE11
- (一)css代码积累——自己经常忘记,但是总记不住的代码
- CSS图片链接、映射
- CSS入门介绍
- CSS的居中问题
- css切背景图片(background-position)
- CSS定位中的必须深究的常用技法
- css 居中
- CSS字体加粗总结