CSS-定位(Position)
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)的更多相关文章
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- web前端css定位position和浮动float
最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...
- css定位position认识
1.绝对定位(position: absolute) 2.相对定位(position: relative) 3.固定定位(position: fixed) 绝对定位 设置position:absolu ...
- CSS定位position
position选项来定义元素的定位属性,选项有5个可选值:static.relative.absolute.fixed.inherit 属性值为relative.absolute.fixed时top ...
- css 定位position总结
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css定位position属性深究
1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...
- 【前段开发】10步掌握CSS定位: position static relative absolute float
希望能帮到须要的人,转自:http://www.see-design.com.tw/i/css_position.html 1. position:static 元素的 position 屬性默認值為 ...
- css定位-position
前言 定位的目的就是把元素摆放到指定的位置. 定位上下文:定位元素的大小,位置都是相对于定位上下文的. position属性值有5个值 static:所有有元素定位默认的初始值都是static.就是不 ...
- CSS - 定位(position)，难点
元素的定位属性主要包括定位模式和边偏移两部分. 1. 边偏移 边偏移属性 描述 top 顶端偏移量,定义元素相对于其父元素上边线的距离 bottom 底部偏移量,定义元素相对于其父元素下边线的距离 l ...
随机推荐
- 编写灵活、稳定、高质量的 css代码的规范
语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声 ...
- spring整合ehcache2.5.2缓存异常-- net.sf.ehcache.CacheException
报错如下: The source of the existing CacheManager is: DefaultConfigurationSource [ ehcache.xml or ehcach ...
- Informatic学习总结_day02_增量抽取
SELECT EMP.EMPNO, EMP.ENAME, EMP.JOB, EMP.MGR, EMP.HIREDATE, EMP.SAL, EMP.COMM, EMP.DEPTNO FROM EMP ...
- [转]Linux下的链接脚本基础
[转]http://linux.chinaunix.net/techdoc/beginner/2009/08/12/1129972.shtml 1. 前言 (1)每一个链接过程都由链接脚本(linke ...
- nginx常见异常分析
1.nginx不转发消息头header问题 proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_ ...
- centos中selinux功能及常用服务配置
SELinux: Secure Enhenced Linux 常用命令 获取selinux的当前状态: # getenforce 临时启用或禁用: # setenfoce 0|1 永久性启用,需要修改 ...
- centos6中iptables单机网络防火墙的使用
概述: iptables:基于软件的形式实现的一种防火墙的软件程序 Firewall:工作在主机或网络边缘,对进出的报文按事先定义的规则进行检查,并且由匹配到的规则进行处理的一组硬件或软件,甚至可能是 ...
- ADC自动转接功能Lua实现
一.背景介绍: 虽然使用Mod_fifo和mod_callcenter可以做呼叫中心的应用,但在实现应用中,这两个模块很难客制化需求,再此我用Lua实现了5路客服(1000-1004),一个呼叫中心号 ...
- Android JAR包、Library项目
[JAR包] android引入JAR包,打包成JAR包,打包成Library项目,导入Library项目 (1)项目导入JAR包:1.在项目目录里建立一个libs目录,将外部jar包拷贝在里面.2. ...
- C# winform（计算器）