Maison  >  Article  >  interface Web  >  css定位

css定位

WBOY
WBOYoriginal
2016-09-27 14:05:211635parcourir

首先看一个示例:

结构:

默认定位
  
相对定位
    
绝对定位

    
固定定位

  

样式:

*{padding: 0;margin: 0;}
.static{width:300px;height: 300px;}
.relative{margin:50px 50px;width: 200px;height: 200px;position: relative;top: 50px;}
.absolute{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}
.fixed{position: fixed;top: 0;left: 0;width: 100px;height: 100px;}

效果图:

总结!

通过设置元素垂直和水平的位置,可以使得:

一.相对定位:元素“相对于”它的起点移动。图上的元素即相对于起点向下移动了50px。它占据着原有的空间。

二.绝对定位:元素“相对于”它的父元素移动(或者是离它最近的已定位的祖先元素移动)。图上元素的左上角坐标和它的父元素重合。它不占据空间。

三.固定定位:元素“相对于”视口移动。图上元素移动到坐标(0,0)的位置。它不占据空间。

 

 

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn