一.position: static  无定位

HTML 元素默认情况下的定位方式为 static(静态)。

静态定位的元素不受 top、bottom、left 和 right 属性的影响。

position: static; 的元素不会以任何特殊方式定位;它始终根据页面的正常流进行定位:

二.position: relative 相对定位

position: relative; 的元素相对于其正常位置进行定位。

设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。

三.position: fixed 相对于窗口的固定定位

position: fixed; 的元素是相对于视口定位的,这意味着即使滚动页面,它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

固定定位的元素不会在页面中通常应放置的位置上留出空隙。

四.position: absolute 绝对定位

position: absolute; 的元素相对于最近的定位祖先元素进行定位(而不是相对于视口定位,如 fixed)。

然而,如果绝对定位的元素没有祖先,它将使用文档主体(body),并随页面滚动一起移动。

注意:“被定位的”元素是其位置除 static 以外的任何元素。

五.position: sticky

position: sticky; 的元素根据用户的滚动位置进行定位。

粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位,直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置(比如 position:fixed)。

position的五个不同的位置值的更多相关文章

  1. position 有五个值:static、relative、absolute、fixed、inherit。

    position 有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页时,没有指定 ...

  2. 如何将位置值写入simotion encoder?

    目标: 将变量值(任意实数)写入Encoder,作为encoder的实际位置值.例如,将MP177手轮的值写入编码器,达到SMC30配置手轮的功能. Platform: simotion D435-2 ...

  3. UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素

    "UC浏览器中,设置了position: fixed 的元素会遮挡z-index值更高的同辈元素(非fixed)." 我们使用的artDialog弹窗中,在UC浏览器中,如果页面高 ...

  4. position 分层固定在屏幕某位置

    很多网站我们看到在屏幕右下角有一个,返回顶部,始终在那儿,还有些网站顶部菜单栏永远也是固定的不动,就是通过今天学习的position来做的. 在style中加入 positon:fixed;top 0 ...

  5. Delphi中Form的position属性与代码自定义窗体位置

    通过Form的Position属性可设置窗体的初始位置,如选择DesktopCenter为桌面中心,ScreenCenter为屏幕中心,等等. 这个属性在很多时候简化了程序代码. 但是,如果设置了po ...

  6. [Redis]Redis的五种数据类型与键值/服务器相关命令

    -------------------------------------------------------------------------------------- String(字符串):最 ...

  7. position置顶或某固定位置 兼容ie6ie7

    用absolute来模拟fixed效果: /*相当于正常的position:fixed;top:0 */.sl_fixed_top{bottom:auto;top:0;_bottom:auto;_to ...

  8. SpringMVC第五篇【方法返回值、数据回显、idea下配置虚拟目录、文件上传】

    Controller方法返回值 Controller方法的返回值其实就几种类型,我们来总结一下-. void String ModelAndView redirect重定向 forward转发 数据回 ...

  9. 第十五章 springboot + pojo默认值设置

    我们有时需要给POJO设置默认值 pojo设置(推荐) 1.User package com.xxx.firstboot.domain; import lombok.Getter; import lo ...

随机推荐

  1. Nacos集群部署:

    Nacos集群部署: 官网:    https://nacos.io/zh-cn/docs/cluster-mode-quick-start.html 1: 下载 Nacos1.2.0 链接:http ...

  2. MVVMLight学习笔记(四)---RelayCommand初探

    一.概述 在MVVM Light框架中,主要通过命令绑定来进行事件的处理. WPF中,命令是通过实现 ICommand 接口创建的. ICommand 公开了两个方法(Execute 及 CanExe ...

  3. 十九:JDBC操作事务

    二.MySQL数据库中操作事务命令 2.1.开启事务(start transaction) 使用"start transaction"开启MySQL数据库的事务,如下所示:

  4. MySql 文件导入导出

    1.将表输出到文件 select * FROM zhilianzhaopin4 INTO OUTFILE 'G:/test.csv'      --------输出位置 fields terminat ...

  5. 关于Java for循环的注意点

    1 import java.util.ArrayList; 2 3 public class Main { 4 5 public static void main(String[] args) { 6 ...

  6. Linkerd 2.10(Step by Step)—3. 自动轮换控制平面 TLS &Webhook TLS 凭证

    Linkerd 2.10 系列 快速上手 Linkerd v2 Service Mesh(服务网格) 腾讯云 K8S 集群实战 Service Mesh-Linkerd2 & Traefik2 ...

  7. idea上传项目到github 2019

    记录一下自己查找的从idea上传项目到github的总结 1.默认本地已经安装好git.exe ,idea也已经和git进行匹配 File-setting-versionControl-git-Tes ...

  8. JavaScript 特殊字符

    代码输出\'单引号\"双引号\&和号\\反斜杠\n换行符\r回车符\t制表符\b退格符\f换页符

  9. Jmeter的初体验--安装

    准备工作 安装JMeter前需要安装配置好Java 一.安装 1.直接在官网下载安装即可,下载地址:http://jmeter.apache.org/download_jmeter.cgi,(Wind ...

  10. golang error错误处理

    error定义 数据结构 go语言error是一普通的值,实现方式为简单一个接口. // The error built-in interface type is the conventional i ...