css总结——position

CSS(Cascading Style Sheet),中文翻译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在css控制页面中,主要有四种样式:行内样式(style 属性将css嵌套在p 标记中)、内嵌式(在HTML部分,没采用任何css代码,而是在style中对css代码进行嵌套)、链接式(使用link语句,将外部css导入到页面中)和导入样式。

在样式设计中,有一个非常关键的属性——position

CSS中有不少属性是用来定位的,这也为我们采用DIV+CSS 布局,取代古老的tabel布局提供了基础支持。

bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

clip: 设置元素的形状。元素被剪入这个形状之中,然后显示出来。

left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移。

overflow: 设置当元素的内容溢出其区域时发生的事情。

position: 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移。

top: 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

vertical-align: 设置元素的垂直对齐方式。

z-index: 设置元素的堆叠顺序。

而这其中非常关键和初学者容易搞混的概念就是 position 属性:

         
      static 默认:
位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。

         
      relative:
位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。

         
      absolute:
位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

         
      fixed:
位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。

不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict
模式)。这些属性是DIV布局的奠基石。由于浏览器的不同,盒模式中也有差异,比如说对于宽度盒高度,在不同浏览器中定义是不同的,IE6是包含边框 、内边距,而FF的只是指内容的宽度。

细节上的差异,往往是我们在日常工作中能总结出来的。所以也不必太在意。了解简单的css的使用,在不断应用的过程中,进行改进和更加深入的了解。对position的简单总结,如有错误,欢迎指出,感激不尽!!

时间: 2024-12-21 05:31:40

css总结——position的相关文章

div+css定位position详解

div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局的多样性,让我们的网页丰富多彩起来. 首先解释relative(相对定位),顾名思义,定位是相对的,那他是相对于什么呢?参照物是什么? 看如下代码: 2 2.预览效果,现在是三个并列的div 3 3.给中间的div增加定位属性:position:relative; top:10px; left:10

十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

css中position:fixed实现div居中

上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; height:150px;} 如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; 或者 right:0; 即可 下面附一个DIV 元素在浏览器窗口居中 其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞

CSS的position属性

position属性的定义和用法:检索或设置对象的定位方式.设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局.假如其他具有不同z-index属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有margin,但仍有padding和边框border.要激活对象的绝对定位,不但要设置此属性值为absolute,而且必须指定left,right,top,bottom属性中的至少一个.否则上述属性会使用他们的默认值auto ,这将导致对

深入理解css中position属性及z-index属性

深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute.最后将会介绍和position属性密切相关的z-index属性. 第一部分:position: static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到t

转载,最容易理解的CSS的position教程——十步图解CSS的position

CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in Ten Steps一文中分十步介绍了CSS的"position"中的"static.relative.absolute.float"使用,觉得蛮有意思的.整理了一下贴上来与大家一起分享.希望大家能喜欢. 在图解这十个过程之前,我将实例的代码放上来,好让大家一个实体参考

CSS定位——position、float小结

在CSS使用position属性来指定元素的定位类型,该属性有四种不同类型的定位,分别为static(默认定位).relative(相对定位).absolute(绝对定位)和fixed(固定定位). 要理解以上四种定位,写看一下CSS的文档流(普通流)概念: 除非专门指定,否则所有框(也就是html元素)都在普通流中定位.也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定. 块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.若某元素的position属

浅谈 css 之 position用法

在 css中, position 属性有四个值可用: static(默认值).absolute.relative.fixed. relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置) absolite: 1.相对于自身的包含块定位: 2.寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块:如果没有的话,则相对于 html进行定位: 3.完全脱离文档流: 4.displ

CSS的position设置

CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getS

css中position属性(absolute/relative/static/fixed)

css中position属性(absolute/relative/static/fixed): position:static   无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso