首页 > Web开发 > 详细

(CSS)定位

时间:2017-01-07 12:57:32      阅读:210      评论:0      收藏:0      [点我收藏+]

什么是CSS中的绝对定位?

   绝对定位(position:absdlute;)是相对于父标签决定位置,一般用于相对定位标签里面,JS特效经常用到。

  设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

  对于定位的主要问题是要记住每种定位的意义

  提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

例子:

<html>

 <meta charset="UTF-8">  <title>绝定定位</title>

<head>

  .father{position: relative;}  在父元素中设置宽高,相对定位

  .one{position: absolute;}  绝对定位 默认是以Body为参照进行定位。 不是默认则,查找最近的设置了定位属性的父元素来作为参照。 

  .tu{ position: absolute;}

</head>

<body>

  <div class="father">  要先设置一个父元素。

    <div class="one"><div>

    <div class="tu"><div>

    <div class="san"><div>

  </div>

</body>

</html>

什么是CSS中的相对定位?

   相对定位(position:relative;)是相对于上一个相对定位的。一般用于浮动定位标签里面,一般跟绝对定位配合使用。
浮动定位才是常用的。

什么是固定定位?

  固定定位(position:fixed;)如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。

例子

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>固定定位</title>
 
 <style>
  body{ height: 10000px;}
  .one{ width:    height:    background-color  position: fixed; }
  ul{ width:  position: fixed;  bottom:;  right:   background-color: }
  ul li{
   list-style: none;
   float: left;
   padding: 5px 15px;
   font: 15px/20px";
  }
 </style>
</head>
<body>
 <!-- <div class="one"></div> -->
 <ul>
  <li>男装</li>
  <li>女装</li>
 </ul>
</body>
</html>

  除了absdlute和relative之外还有一个默认定位(position:static;)标准文档流中的定向。

相对定位

(CSS)定位

原文:http://www.cnblogs.com/m79y/p/6258747.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!