ITPub博客

首页 > 应用开发 > IT综合 > 【Web前端基础知识】CSS的定位机制之定位

【Web前端基础知识】CSS的定位机制之定位

IT综合 作者:ii_chengzi 时间:2020-05-16 14:42:11 0 删除 编辑

在前端页面开发中,要实现复杂页面的布局,必须根据不同的设计寻求不同的CSS定位机制。 CSS有三种基本定位机制:标准流,浮动,定位,今天小编先给大家介绍一下定位。

定位(position)

顾名思义,你想定哪就定哪;

元素的定位属性主要包括两部分:定位模式和边偏移

(1)定位模式

定位的语法:position:属性值;

position属性常用的值

static自动定位(默认定位方式)

relative相对定位,相对于其原文档流的位置进行定位

absolute绝对定位,相对于其上一个已经定位的父元素进行定位

fixed固定定位,相对于浏览器窗口进行定位

1)静态定位(static)

文档流中的默认位置,标准流特性。

取消定位会用到:position: static;

HTML

CSS

不能使用偏移属性。

2)相对定位(relative)

相对定位是将元素相对于它在标准流中的位置进行定位,当position属性的取值为relative时,可以将元素定位于相对位置。

HTML

CSS

浏览器

对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留,不脱标。

CSS

浏览器

相对定位的元素不转行内块

3)绝对定位(absolute)

不占有位置,可以放在父级盒子的任意一个地方。

元素自动转为行内块,宽度和高度跟内容有关。

HTML

CSS

子绝父相/子绝父绝(挺重要)

子级是绝对定位,那么离他最近的父级一定要给一个相对定位(必要时给绝对定位),不然子级会以浏览器当前页面进行定位,有可能你会看不到它。

4) 固定定位(fixed)

固定定位脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置,跟父级没有关系。

完全脱标,滚动条滚动不会影响它在浏览器窗口中的位置。

元素自动转为行内块,宽度和高度跟内容有关。

HTML

CSS

浏览器

(2)边偏移

top顶端偏移量,定义元素相对于其父元素上边线的距离

bottom底部偏移量,定义元素相对于其父元素下边线的距离

left左侧偏移量,定义元素相对于其父元素左边线的距离

right右侧偏移量,定义元素相对于其父元素右边线的距离

http://shenzhen.offcn.com/html/jiaoshi/


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31543790/viewspace-2692514/,如需转载,请注明出处,否则将追究法律责任。

全部评论

注册时间:2018-06-26

  • 博文量
    252
  • 访问量
    192598