CSS的几种定位方式

CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局。

css定位的几种方式：

1、static（静态定位）：

默认值。没有定位，当我们没有指定定位方式的时候，这时默认的定位方式就是static，也就是按照文档的书写布局自动分配在一个合适的地方，这种定位方式用margin来改变位置，对left、top、z-index等设置值无效，这种定位不脱离文档流；

2、relative（相对定位）：

定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。

可以通过设置left、top等值，使得指定元素相对其正常的位置进行偏移。

3、absolute（绝对定位）：

默认情况下依赖浏览器的左上角为定位基准;如果绝对定位的元素存在父、祖先元素且存在相对定位的时候该元素将依赖具备相对定位的元素来进行定位，而不是左上角。

这种定位通过设置top、right、bottom、left这些偏移值，相对于 static 定位以外的第一个父元素进行定位（这种定位通常设置父元素为relative定位来配合使用），在没有父元素的条件下，它的参照为body，该方式脱离文档流；

4、fixed（固定定位）：

生成绝对定位的元素，相对于浏览器窗口进行定位。只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

CSS的几种定位方式相关推荐

CSS的四种定位方式
CSS的四种定位方式 1.静态定位: 设置方式为position: static;静态定位的盒子是标准流状态,用于取消定位.静态定位的盒子处于网页的最底层,并且top.left.bottom.righ ...
【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）
目录一.CSS定位布局 1.1.static静态定位 1.2.relative相对定位 1.3.fixed固定定位 1.4.absolute绝对定位 (1)默认绝对定位参考点 (2)设置绝对定位参考 ...
css的三种定位方式使用探讨
css 3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位. 默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float 具体实例复制代码代码 ...
CSS中的四种定位方式
在CSS中定位有以下4种: 静态定位 - static 相对定位 - relative 绝对定位 - absolute 固定定位 - fixed 静态定位 - static 静态定位是css中的默认定 ...
CSS中常用的几种定位方式
定位的基本语法: position:方式 top: 多少px; right: 多少px; left: 多少px; bottom: 多少px; 有常用的几种方式,如下: 第一种:相对定位 relativ ...
自动化的8种定位方式
自动化的8种定位方式 1.id属性 2.name属性 3.class属性 4.标签名 5 6 .链接元素 link_text #完全匹配 #模糊匹配 7 8. xpath =ZZ 易懂 css = 难 ...
Selenium八种定位方式
八种定位方式分别是:id.name.class name.tag name .link text.partial link textxpath.css selector. 元素标签或者元素属性:id. ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
前端——CSS中常用的定位方式
#博学谷IT学习技术支持# 目录 1.静态定位 2.相对定位 3.绝对定位 4.固定定位 5.定位偏移值 6.元素层级关系 1.静态定位静态定位,position: static;静态定位就是标准流 ...

CSS的几种定位方式

CSS的几种定位方式相关推荐

最新文章

热门文章