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

html_位置偏移属性position

时间:2017-12-31 21:04:22      阅读:3264      评论:0      收藏:0      [点我收藏+]

标签:它的   ott   叠加   top   otto   清除   class   内容   没有   

      定位属性

  位置属性position:static、relative、absolute、fixed

  偏移属性:top、bottom、left、right

  浮动定位属性:float/clear

1.浮动定位 float

-流定位(默认定位): 块级元素从上到下,行内元素在一行中从左到右排列水平布置。
-浮动定位:
-让元素脱离普通的流定位
-将浮动的元素放置在父元素的左边或者右边

float:left/right

浮动定位 需要通过float 属性来实现 ,值 none/left/right
配合 clear 属性使用
left/right/both
clear 属性不允许被清除浮动的元素的左右边挨着浮动元素 ,底层元素在被清除元素
的上下边添加足够的清除空间。

2.相对定位 relative

-元素会相对它原来位置偏移某个距离
-元素原本所占的空间不释放(不能叠加实体内容)
-position: relative 被元素设置为相对定位元素。
然后通过设置偏移属性 left/right/top/bottom 设置偏移量
  position:relative

    left:50px;  向右偏移50像素。

3.绝对定位 absolute

<!--
-绝对定位
-将元素的内容从当前定位中移除,释放空间
-使用偏移属性固定该元素的位置
-相对已定位的祖先元素<最近的父元素>进行位移。如果祖先元素都没有定位(没有position:relative/absolute),则相对最初包含它的块如body元素等进行位移
-position: absolute 被元素设置为绝对定位元素。
然后通过设置偏移属性 left/right/top/bottom 设置偏移量
-->

  position :absolute

    right:80px;  距离父元素右端80像素

4.fixed 固定定位

<!--
-固定定位
-将元素的内容固定在页面的某个位置
-当用户向下滚动页面时,元素框不会随着移动。
-不占页面空间,将元素从流定位中完全移除释放。
-position:fixed
然后通过设置偏移属性 left/right/top/bottom 设置偏移量
-->

position:fixed

  right:0px;

  bottom:0px;  固定图片在右下角

 

html_位置偏移属性position

标签:它的   ott   叠加   top   otto   清除   class   内容   没有   

原文地址:https://www.cnblogs.com/zhangzonghua/p/html_position.html

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