关于CSS中position的属性

position的属性:

1.static (文档流):默认值,没有进行定位,元素出现在正常流中,忽略top   left   right   bottom   z-index的申明 (无影响)。

一行接着一行

2.relative(相对定位):生成相对定位的元素,相对于其正常的位置进行定位。例如,"left:20px" 会向元素的 LEFT 位置添加 20 像素.即通过left、right、top、bottom属性在正常文档流中的偏移位置,相对定位完成的过程是首先按static(float)方式生成一个元素,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定偏移前的位置保留不动。

3.absolute(绝对定位):生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

4.fixed(相对浏览器定位 ): 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。最好的理解案例边窗广告会随着你滚动浏览器页面而跟随着一起动始终保持在相对位置

5.inherit:从父元素中继承position的值。

原文地址:https://www.cnblogs.com/puyi174843/p/9693682.html

时间: 2024-10-12 05:09:35

关于CSS中position的属性的相关文章

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中&quot;position:relative&quot;属性与文档流的关系

前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:"position:relative"不会导致元素脱离文档流. 博文地址:CSS中"position:relative"属性与文档流的确切关系 "relative"与文档流 说到标准,最权威的自然莫过于CSS标准文档.经过一番繁琐的查找之后(w3c网站

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

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

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

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

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

CSS中Position属性

也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | relative | absolute | fixed | inherit static 和 inherit : 没什么值得介绍的. relative : 相对于元素自身的定位. absolute :相对于包含块的定位. fixed : 相对于窗口的定位. 2.包含块 包含块就是 top | righ

【拼爹坑爹不比爹】深入理解css中position属性及z-index属性

总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.)2,单一父元素不设值,子z-index才奏效:"不比爹"3,多个父元素,"拼爹坑爹"(子凭父贵,子贵父不贵)(爹设值,因外有body)4,多个父元素多子元素,各父各子高低相互比,就是不比爹:>< [转]深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要

深入理解css中的margin属性

转载自  http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

CSS中的z-index属性如何使用

原文:CSS中的z-index属性如何使用 z-index属性介绍# 只有设置了定位我们才会使用到该z-index属性,如:固定定位.相对定位.绝对定位. 定位元素默认的z-index属性值是0. 如果2个定位的元素都没有设置z-index属性,后者会覆盖到前者. 如果2个定位的元素都设置了z-index属性,并且数值一样大还是后者会覆盖到前者. z-index属性的属性值大的就会覆盖小,就是设置元素的层级. z-index属性实践# 用实践证明这句话,如果2个定位的元素都没有设置z-index