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 是粘性定位,这种定位方式相当于 relativefixed 定位方式的结合体。

<!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. MySQL内连接、外连接、交叉连接

    外连接: 左连接:left join 或 left outer join 以左边的表为基准,如果左表有数据,而右表没有数据,左表的数据正常显示,右表数据显示为空. 创建user表,用于记录用户 use ...

  2. 跟踪OceanLotus的新下载程序KerrDown

    攻击的方法 两种方法将KerrDown下载器传递给目标.一个是使用带有恶意宏的Microsoft Office文档,另一个是包含带有DLL side-loading合法程序的RAR存档 .对于RAR存 ...

  3. 移动端rem单位适配使用

    1.适配方法 //缩放比例!function(e,t){function i(){o=1,e.devicePixelRatioValue=o,s=1/o;var t=a.createElement(& ...

  4. python根据服务名获取服务启动路径

    #coding=utf8 import _winreg as winreg class Win32Environment: """Utility class to get ...

  5. 001_深度剖析什么是 SLI、SLO和SLA?

    前言 SLO和SLA是大家常见的两个名词:服务等级目标和服务等级协议. 云计算时代,各大云服务提供商都发布有自己服务的SLA条款,比如Amazon的EC2和S3服务都有相应的SLA条款.这些大公司的S ...

  6. 转载:abstract的方法是否可同时是static,是否可同时是native,是否可同时是synchronized?

    原文:http://blog.csdn.net/fhm727/article/details/5222965 1.abstract与static (what) abstract:用来声明抽象方法,抽象 ...

  7. Spring_使用XML文件的方式配置事务

    步骤: 正常配置jdbctemplate 正常配置bean 配置事物管理器 配置事物管理器 配置aop切入点,通过切入点把事物链接起来 思路: 接着上一个买书的例子吧,直接拷到新包下,把注解都干掉,需 ...

  8. [转] php die()与exit()的区别实例详解

    1 前言 php中die()与exit()的真正区别是什么因,我们百度一下发现die是退出并释放内存,exit是退出但不释放内存了,那么真的是这样吗,需要的朋友可以参考下 2 正文 网上搜索die与e ...

  9. Mac安装Homebrew记录

    在终端输入: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install) ...

  10. js继承的几种实现方法

    一.用function实现: function Person(name) { this.name = name; } Person.prototype.getName = function() { r ...