美文网首页
CSS 几种定位方式的区别

CSS 几种定位方式的区别

作者: 阿畅_ | 来源:发表于2018-08-27 17:01 被阅读54次

static(静态定位)

  • 默认值,设置 top,right,bottom,left 这些偏移属性不会影响静态定位的正常显示(设置这些属性没有用)。

relative(相对定位)

  • 元素相对自身偏移某个位置,元素扔保持其未定位的形状,它原本所占用的空间扔保留,可以通过 z-index 进行层次分级,子元素可相对该元素进行绝对定位;

absolute(绝对定位)

  • 元素从文档流完全删除(会脱离文档流), 相对于其最近的父级块元素(如果父级元素 position 为 static 时,absolute 元素将继续向上级查找,直到找到 body,以 body 坐标原点进行定位),元素原先在正常文档流中所占的空间会关闭,元素定位后生成一个块级框,可以通过 z-index 进行层次分级;

fixed(固定定位)

  • 它所相对固定的对象是可视窗口,与其他无关,可以通过z-index 进行层次分级。

  • 另外还有一个 float(浮动定位)

  • 这种定位方式很简单,只需要执行一个浮动的方向(例如: float: left;就表示这个元素向左边摆放),它的定位是 相对于父元素 容器;

注意: 如果该元素设置了浮动,后面紧邻的则会受到浮动的影响,因此需要后面的元素 ·清除浮动· (例如可以用 clear: both; 或者父元素添加 overflow: hidden 等方法)。在两个相邻元素设置相同浮动的情况下,两元素将按顺序相邻摆放,这种定位也是会使元素 脱离文档流

相关文章

  • CSS 几种定位方式的区别

    static(静态定位) 默认值,设置 top,right,bottom,left 这些偏移属性不会影响静态定位的...

  • css 定位的几种方式

    文档流/脱离文档流 文档流,指的是元素在排版布局过程中,元素会从自上到下,从左到右的顺序依次排列; 脱离文档流,指...

  • 记11月29日作业

    问题一:CSS有几种引入方式? link 和@import 有什么区别? css一共有4种引入方式: 内联样式 内...

  • position属性详解(粘性布局)

    CSS中 position主要有以下几种定位方式 static 静态定位,元素处于文档流中,此时 top, rig...

  • VIP10-11月29日作业:CSS

    问题一:CSS有几种引入方式? link 和@import 有什么区别? CSS引入方式1.外部样表式:如下 2....

  • CSS Position 定位的几种方式

    在H5中对一个元素进行定位有多种方式,现在普遍采用Flex布局,能很好的兼容浏览器和移动端,但早年间网页中的主要定...

  • CSS之position定位

    在CSS中,使用position属性可以改变元素的定位方式,其取值有以下几种: static relative ...

  • 一些关于CSS的基础问答

    CSS的全称是什么?CSS的全称是层叠样式表 CSS有几种引入方式? link 和@import 有什么区别?CS...

  • css基础

    1.CSS的全称是什么? 层叠样式表 2.CSS有几种引入方式? link 和@import 有什么区别? CSS...

  • HTML2

    样式有几种引入方式? link和 @import有什么区别? 样式引入方式: 两种都是外部引用CSS的方式,差别在...

网友评论

      本文标题:CSS 几种定位方式的区别

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