css中的定位

上一篇博客,我大概介绍了下浮动的使用及行为。其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当。

一、定位分类:

a、静态定位  position:static;    :元素按照正常的文档流顺序出现,位置等不产生任何改变(文档流的默认属性)。

b、相对定位  position:relative;:元素盒会产生移动,并且它在文档流中的原始空间会保留下来。

c、绝对定位  position:absolute;:元素从文档流中脱离出来,相对于容器块产生移动,原始空间不会被保留,周边元素将会占据它原来的空间。

d、固定定位  position:fixed;:元素从文档流中脱离出来,但是他们是相对于浏览器(视口)产生的位置的改变。目前有些浏览器不支持该种定位方式。

注:对于被设置为静态或相对定位的非根元素,容器块是它最近的块级元素、表格单元的内容区的边缘。

  对绝对定位的非根元素,容器块是它最近的不是静态定位的祖先元素(即它的父级元素必须为position:absolute;或者position:relative;或者position:fixed;)

二、position  的属性:

当一个元素的position 定位类型一旦被确定后,它有四个偏移属性:top  right  bottom left  (四个属性的值可以设置为:长度、百分比或者auto;)

a、相对定位:position:relative;

(top right bottom left )相对于它们在文档流中的初使位置进行定位,没有设置偏移属性的,默认值设为auto;

在文档流中所占据的原始空间被保留;

可能会覆盖其它元素;

当设置为相对定位时,使层位置产生偏移,但并不影响文本流中接下来其它层的位置;

当设置为相对定位时,层的层叠级别高于文本流的级别(即优先顺序是越靠近越产生影响);

当两个元素设置为相对定位时,同等级别下会按照文本流的顺序层叠显示。

.a {position:relative;top:100px;left:100px;}

b、绝对定位:position:absolute;

(top right bottom left )相对于容器块边缘(包括margin值)进行定位,没有设置偏移属性的,默认值设为auto;

在文档流中占据的原始空间不被保留;

当设置为绝对定位时,该层将从文档流中脱离,以该层所在的容器块的坐标原点为参考进行偏移,不会对其它元素产生任何影响;

注意:当容器块没有设置position属性或者position属性为static时候,将以body或html的坐标原点为参考。

.b {position:absolute;top:100px;left:100px;}

注意:建议文档流中慎用position属性,尽量使用float属性来对文档流相关元素进行定位!!!

时间: 2024-10-10 18:35:18

css中的定位的相关文章

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

Css中Position定位属性与层级关系

今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Css中Position定位属性与层级关系</title> 6 <style type="text/css"> 7 #W{ 8

CSS中的定位与浮动

CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b

css中的定位属性position

同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来实现的一些特效经常会用到定位属性,比如鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现,但是上一次着重只写了jquery. 那么这次我想将定位属性的运用拿来说一下. 定位属性position常用的取值:relative/absolute/fixed;一般配

总结一下CSS中的定位 Position 属性

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. relative:生成相对定位的元素,相对于其

对css中的定位属性postion刨根解牛

定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常强大,也很让人吃惊. 一切皆为框: div.h1 或 p 元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框”.与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”. CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对

浅谈CSS中的定位知识

1,静态定位(static) 表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 2,相对定位(relative) 将移动元素盒,但是它在文档流中的原始空间会保留下来: 相对定位元素有如下几个基本特征: 1,.使用CSS样式规则{position: relative:}声明: 2.使用一个到多个偏移属性(top.right.bottom.left)相对于它们在正常文档流中的初始位置定位.没有 设置偏移属性的,默认被设置为auto: 3.在文档流中所占据的原始空间被保留: 4.可能会

CSS中position定位

定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position="absolute" 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元

CSS中的定位position属性(absolute,relative,static,fixed)的具体用法

只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. 2.Fixed属性值是相对于浏览器窗口定位的(及视口坐标),设置该属性后的元素是独立的,他脱离文档流,当拖动滚动轴时该元素在浏览器窗口中的位置不会发生变化.时 3.所有的父级元素均没有设置position(除了static属性值以外)时,则当某个子元素position:absolute时,其top