css四种定位

作者: 王跃坤txdy | 来源:发表于2019-07-28 21:30 被阅读14次

Static

这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。

Relative

相对定位方式,相对于其父级元素(无论父级元素此时为何种定位方式)进行定位,准确地说是相对于其父级元素所剩余的未被占用的空间进行定位(在父元素由多个相对定位的子元素时可以看出),且会占用该元素在文档中初始的页面空间,即在使用top,bottom,left,right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。

Absolute

绝对定位方式,脱离文档流,不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位,如果其所有的父级元素都是static定位,那么此元素最终则是以当前窗口作为参考进行定位。可以使用top,bottom,left,right进行位置移动,亦可使用z-index在z轴上面进行移动。当元素为此定位时,如果该元素为内联元素,则会变为块级元素,即可以直接设置其宽和高的值;如果该元素为块级元素,则其宽度会由初始的100%变为auto。

注意:当元素设置为绝对定位时,在没有指定top,bottom,left,right的值时,他们的值并不是0,这几个值是有默认值的,默认值就是该元素设置为绝对定位前所处的正常文档流中的位置。

Fixed

绝对定位方式,直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。

相关文章

  • 四种常见的定位类型

    css常用的四种定位类型static、relative、absolute、fixed。要清楚的理解四种定位类型,首...

  • CSS四种定位方式的详解

    CSS布局的四种定位方式 1、static(静态定位): 默认值。没有定位,元素出现在正常的流中(忽略 top, ...

  • 定位方式、实现及使用场景

    定位方式 CSS 有三种基本的定位机制:普通流(文档流)、浮动和绝对定位 position 属性共有四种取值: s...

  • css四种定位

    Static 这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。 Relative 相对定位方式...

  • 绝对定位布局和浮动布局

    在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、rela...

  • css入门知识点总结

    本文目录 1.font:综合设置字体样式 2.CSS复合选择器 3.CSS 三大特性 4.背景简写 5.四种定位 ...

  • CSS 四种定位总结

    四种定位模式总结 重要技巧: 1、子绝父相: 如果自己是绝对定位的话,父级要用相对定位。 2、z-index: 相...

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

网友评论

    本文标题:css四种定位

    本文链接:https://www.haomeiwen.com/subject/skaprctx.html