码迷,mamicode.com
首页 > Web开发 > 详细

17 css定位

时间:2019-06-06 23:03:15      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:CSS定位   highlight   文档流   默认   元素   osi   固定   占用   top   

css定位
	定位是用来移动元素位置的。
	相对位置,参考元素原始位置,偏移某个距离
	绝对位置,参考点是最近的有定位的祖先元素,偏移某个距离
	
定位
1 css定位 相对定位  绝对定位  固定定位
   为什么
	  移动元素
      设置元素在包含块中出现的位置,以及遮盖

2 相对定位
     position: relative;
	 参考自己原来的位置,偏移某个距离

     * 用途
		1 做一些位置微调 
		2 配合绝对定位使用 

     * 相对定位的元素不脱标,它原本所占的空间仍保留

		top 正数向下  可以理解为:距离原来位置顶边框,距离是100个像素     
		left 正数向右   距离原来位置左边框,距离是100个像素    
		right 正数向左  距离原来位置右边框,距离是100个像素    
		bottom 正数向上  距离原来位置底边框,距离是100个像素    

		任意组合  从top、bottom选一个 left、right选一个

3 绝对定位
  	position: absolute
    * 绝对定位元素脱离标准文档流
		脱标的意思:元素框不在文档流中,与文档流无关了,不占用文档流的空间
    * 定位参考点
		相对于其包含块:绝对定位的元素,他的参考点相是最近的有定位的祖先元素。如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块
 
        c 祖先盒子做参考点
             子绝父相最常见的定位手段
             最近的有定位的祖先元素:最近的、(无论何种定位 相对可以 绝对也可以 固定定位都可以)、祖先元素做参考

   * 绝对定位的元素居中
      	 margin: 0 auto;  不管用 原因适合标准流中有宽度的块元素
   只能用margin-left,margin-right

   * 应用
       90%的压盖效果都是绝对定位做的           


4 固定定位
    position: fixed;
    * 固定定位元素也是脱标
    * 参考点: 浏览器的左上角

图片的垂直对齐方式
     vertical-align:text-top  跟文本顶部对齐
	 text-bottom 跟文本底部对齐

z-index属性
	1  作用: 负责谁压盖谁
		1、 定位的元素能够压住没有定位的( 默认情况)
		2、假如都定位了,html代码后面的盒子压住前面的

		div   没有定位
		div   绝对定位
		div   相对定位

	2   使用
      * z-index: 数字  数字大的压住数字小的 ,默认值是0,
      * z-index只适用于有定位的元素,标准流的元素不能写z-index,浮动的元素也不能写z-index 
			z-index:-1 可以使定位元素放在标准流元素的后面

      * 拼爹现象 见案例
               如果父元素都是定位元素,则比较父元素的z-index大小,值大的盖住值小的,
什么是拼爹现象

  

17 css定位

标签:CSS定位   highlight   文档流   默认   元素   osi   固定   占用   top   

原文地址:https://www.cnblogs.com/xuanjian-91/p/10987008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!