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

码农公社  210.net.cn   210是何含义?10月24日是程序员节,1024 = 210、210既 210 之意。

定位??position 


一、基本概念

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

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


二、静态定位??static

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

<p class="position_static">码农公社:www.210.net.cn</p> 

  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; }


1.jpg

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


四、相对定位??Relative Position

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


HTML

<p>码农公社 <span>210.net.cn </span> 给个赞吧。

CSS

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

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

1.jpg


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


五、绝对定位??Absolute Position 

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

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


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


HTML


<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>




<p>没有定义的段落</p>


<p class="abs">这是绝对定位  作者 RodmaChen. </p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>


<p class="fix">这是固定定位 作者  RodmaChen </p>


<p>没有定义的段落</p>

<p>没有定义的段落</p>


<p class="rel">这是相对定位 作者 RodmaChen</p>


<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>

<p>没有定义的段落</p>


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;}


输出效果

a6.gif

评论