CSS-定位(Position)

学习自

菜鸟教程

Overview

CSS中HTML元素存在以下之后定位选项

Position Desc
static html 元素的默认的定位方式(即没有定位)，元素正常出现在文档流中
fixed 相对于浏览器窗口是固定的
relative 相对于自己的定位
absolute 相对于父布局进行定位
sticky 粘性定位, 相当于 relative 和 fixed 的结合体

static

HTML 元素的 默认 值，即没有定位，元素正常出现在文档流中，此定位方式不会受到 top right .. 的影响。

fixed

元素的位置相对于浏览器窗口是固定的。

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Study Html</title>

  <style>

    h2 {

      width: 100%;

      border-left-style: solid;

      border-left-width: 5px;

      border-left-color: cornflowerblue;

      background-color: beige;

      position: fixed;

    }

  </style>

</head>

<body>

  <h2>This is a Fixed H2</h2>

  <ul>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    <li>Item</li>

    <!-- .... -->

  </ul>

</body>

</html>

relative

relative 定位是相对其 正常 的位置.

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Study Html</title>

  <style>

    h2 {

      border-left: 5px solid coral;

      background-color: aliceblue

    }

    h2.positive-left {

      position: relative;

      left: 20px;

    }

    h2.negative-left {

      position: relative;

      left: -20px;

    }

  </style>

</head>

<h2>This is a common normal H2!</h2>

<h2 class="positive-left">This is a left=20px H2!</h2>

<h2 class="negative-left">This is a left=-20px H2!</h2>

<body>

</body>

</html>

absolute

absolute 定位方式相对的是父布局，如果没有父布局，那么相对的是 html 节点。

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Study Html</title>

  <style>

    h2 {

      border-left: 5px solid coral;

      background-color: aliceblue;

      position: absolute;

      top: 100px;

      left: 100px;

    }

  </style>

</head>

<h2>This is a common normal H2!</h2>

<p>绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html</p>

<body>

</body>

</html>

sticky

sticky 是粘性定位，这种定位方式相当于 relative 和 fixed 定位方式的结合体。

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Study Html</title>

  <style>

    h2 {

      position: sticky;

      left: 10px;

      top: 0PX;

      border-left: 5px solid lightblue;

      background-color: antiquewhite;

      width: 100%;

    }

  </style>

</head>

<p>翻滚吧</p>

<p>翻滚吧</p>

<p>翻滚吧</p>

<p>翻滚吧</p>

<p>翻滚吧</p>

<h2>翻滚吧，牛宝宝！</h2>

<p>翻滚吧</p>

<p>翻滚吧</p>

<p>翻滚吧</p>

<p>翻滚吧</p>

<!-- ..... -->

<body>

</body>

</html>

重叠的元素

元素的定位与文档流无关，所以他们可以覆盖页面上的其他的元素，z-index 属性确定了哪个元素在上面，哪个元素在下面。

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8" />

  <title>Study Html</title>

  <style>

    img {

      position: absolute;

      top: 0px;

      left: 0px;

      z-index: -1;

    }

  </style>

</head>

<p>测试文本测试文本测试文本测试文本测试文本测试......</p>

<img src="./imgs/dog.png" />

<body>

</body>

</html>

CSS-定位(Position)的更多相关文章

  1. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  2. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  3. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  4. css定位position认识

    1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...

  5. CSS定位position

    position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...

  6. css 定位position总结

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. css定位position属性深究

    1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...

  8. 【前段开发】10步掌握CSS定位: position static relative absolute float

    希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...

  9. css定位-position

    前言 定位的目的就是把元素摆放到指定的位置. 定位上下文:定位元素的大小,位置都是相对于定位上下文的. position属性值有5个值 static:所有有元素定位默认的初始值都是static.就是不 ...

  10. CSS - 定位(position)，难点

    元素的定位属性主要包括定位模式和边偏移两部分. 1. 边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线的距离 bottom 底部偏移量,定义元素相对于其父元素下边线的距离 l ...

随机推荐

  1. SpringBoot启动方式讲解和部署war项目到tomcat9

    1.SpringBoot启动方式讲解和部署war项目到tomcat9简介:SpringBoot常见启动方式讲解和部署war项目Tomcat 1.ide启动 2.jar包方式启动 maven插件: &l ...

  2. python 面向对象的类

    参考<learn python hard way> 网址:https://learnpythonthehardway.org/book/ex41.html class X(Y) " ...

  3. C#的五种访问修饰符

    简述: 所有类型和类型成员都具有可访问性级别,用来控制是否可以在您程序集的其他代码中或其他程序集中使用它们. 可使用访问修饰符指定声明类型或成员的可访问性. 在C#语言中,共有五种访问修饰符:publ ...

  4. Struts自定义拦截器&拦截器工作原理

    0.拦截器的调用原理: 拦截器是一个继承了序列化接口的普通接口.其工作原理是讲需要被拦截的对象作为参数传到intercept()方法内,在方法内部对此对象进行处理之后再执行原方法.intercept( ...

  5. PLSQL_day01

    declare begin  dbms_output.put_line('Hello world') end;

  6. 【C++】面试题目：从尾到头打印链表

    通过<剑指offer 名企面试官精讲典型编程题>看到一道讲解链表的题目. 题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值 链表定义如下: typedef struct _NO ...

  7. pt-online-schema-change VS oak-online-alter-table

    前言 在上篇文章中提到了MySQL 5.6 Online DDL,如果是MySQL 5.5的版本在DDL方面是要付出代价的,虽然已经有了Fast index Creation,但是在添加字段还是会锁表 ...

  8. bzoj 1803: Spoj1487 Query on a tree III(主席树)

    题意 你被给定一棵带点权的n个点的有根数,点从1到n编号. 定义查询 query(x,k): 寻找以x为根的k大点的编号(从小到大排序第k个点) 假设没有两个相同的点权. 输入格式: 第一行为整数n, ...

  9. zabbix3.0.4使用shell脚本和zabbix自带模板两种方法添加对指定进程和端口的监控

    zabbix3.0.4添加对进程的监控: 方法一:通过自定义命令进行监控 主要思路: 通过 ps -ef|grep sdk-push-1.0.0.jar |grep -v grep|wc -l 这个命 ...

  10. ubuntu系统初始化网络及mysql配置

    安装系统时需要安装open-ssh服务软件,否则无法远程连接 1.修改root密码 # sudo passwd 输入密码即可 切换到root用户,需要输入刚才的root密码 # su - 2.配置网络 ...