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. 基于vue-cli的eslint常用设置

    .editorconfig 文件详细备注 # 最顶级的配置,相当于根 editorconfig 直到查找到root=true 才会停止查找不然会一直向上查找 root = true # 通配符 表示匹 ...

  2. Python中的exec、eval使用实例

    Python中的exec.eval使用实例 这篇文章主要介绍了Python中的exec.eval使用实例,本文以简洁的方式总结了Python中的exec.eval作用,并给出实例,需要的朋友可以参考下 ...

  3. centos6.5下vsftpd服务的安装及配置并通过pam认证实现虚拟用户文件共享

    FTP的全称是File Transfer Protocol(文件传输协议),就是专门用来传输文件的协议.它工作在OSI模型的第七层,即是应用层,使用TCP传输而不是UDP.这样FTP客户端和服务器建立 ...

  4. 中文汉字和常见英文数字等的unicode编码范围实例页面

    链接: https://www.zhangxinxu.com/study/201611/chinese-language-unicode-range.html

  5. hdu1506单调栈的宽度

    很好的题目,单调栈上的宽度如何求 题解:https://blog.csdn.net/baidu_35643793/article/details/64440095 单调队列和单调栈都是去除没有用的数据 ...

  6. python 全栈开发，Day139(websocket原理,flask之请求上下文)

    昨日内容回顾 flask和django对比 flask和django本质是一样的,都是web框架. 但是django自带了一些组件,flask虽然自带的组件比较少,但是它有很多的第三方插件. 那么在什 ...

  7. ERP退货系统管理（四十五）

    添加的存储过程:(添加退货申请信息的存储过程) CREATE PROCEDURE [dbo].[BioBackSendGoods_ADD] @SendBackID INT OUTPUT, ), @Ap ...

  8. RDLC 主从报表筛选

    今天继续学习RDLC报表的“参数传递”及“主从报表” 一.先创建DataSet,如下图: 二.创建一个报表rptDEPT.rdlc,显示部门T_DPET的数据 三.嵌入Default.aspx中,写在 ...

  9. IntelliJ IDEA设置不自动打开最后关闭的项目

  10. ubuntu的常用liunx命令

    一.基本命令 1.查看Ubuntu版本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Descriptio ...