css静态定位详解,CSS中的定位方式，相对、绝对、固定、静态，瞬间搞懂

码农公社  210.net.cn  210是何含义？10月24日是程序员节，1024 =210、210既

210

之意。

定位??position

一、基本概念

1、CSS定位属性允许您定位元素。它还可以将元素放置在另一个元素之后，并指定当元素的内容太大时应该怎么做。

2、可以使用top，bottom，left，right属性定位元素。但是，首先要设置position属性，否则这些属性将不起作用。

二、静态定位??static

HTML元素默认情况下处于静态位置。始终根据页面的正常流程来定位静态定位的元素。

码农公社：www.210.net.cn

p.position_static {    position:static;    top: 30px;    right: 5px;    color: red; }

静态定位的元素不受top，bottom，left和right属性的影响。

三、固定定位??Fixed Positioning

固定位置的元素相对于浏览器窗口定位，并且即使滚动窗口也不会移动。

p.position_fixed {    position: fixed;    top: 30px;    right: 5px;    color: red; }

通俗的讲就是：一动不动。

四、相对定位??Relative Position

相对于自身的一种定位，随意改变移动他的位置并不会影响其他元素的位置。

HTML

码农公社 210.net.cn 给个赞吧。

CSS

p {    width: 350px;    border: 1px black solid;    position: fixed; }

span {    background: green;    color:white;    position: relative;    top: 150px;    left: 50px; }

相对定位的元素的内容可以移动并与其他元素重叠，但是仍保留该元素的空间。

五、绝对定位??Absolute Position

1、绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left，right，top，bottom进行绝对定位。

2、绝对定位的元素可以与其他元素重叠。

上述几个定位的综合代码及效果展示 如下

HTML

没有定义的段落

没有定义的段落

没有定义的段落

没有定义的段落

没有定义的段落

没有定义的段落

没有定义的段落

这是绝对定位  作者 RodmaChen.

没有定义的段落

没有定义的段落

没有定义的段落

这是固定定位 作者  RodmaChen

没有定义的段落

没有定义的段落

这是相对定位 作者 RodmaChen

没有定义的段落

没有定义的段落

没有定义的段落

没有定义的段落

CSS

.abs {     width: 150px;     left:100;     border: 3px black solid;     position: absolute;}

/* it works without top/bottom     or left/right */

.fix {     width: 150px;     border: 2px red dotted;     position: fixed;     top:50; left:100;}

/* work only with positioning */

.rel {     width: 150px;     border: 1px blue dashed;     position: relative;}

输出效果