CSS笔记1：属性--定位
相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
元素定位
| 属性 | 版本 | 继承 | 描述 |
| position | css2/3 | 检索对象的定位方式 | |
| z-index | css2 | 检索或设置对象的层叠顺序 | |
| top | css2 | 检索或设置对象参照对物顶边界向下偏移位置 | |
| right | css2 | 检索或设置对象参照相对物右边界向左偏移位置 | |
| bottom | css2 | 检索或设置对象参照相对物底边界向上偏移位置 | |
| left | css2 | 检索或设置对象参照相对物左边界向右偏移位置 | |
| clip | css2/3 | 检索或设置对象的可视区域。区域外的部分是透明的 |
定义和用法
position 属性规定元素的定位类型。
| 值 | 描述 |
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 备注：绝对定位； 定位参照物为：如果自己所在的模块不是绝对定位元素，就往上级找，直到body为止。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| center | 与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3） |
| page | 与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） |
| sticky | 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3） |
| Clip | 裁切 |
测试代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
div{
font-size:12px; border-width:1px; border-color:#F33; border-style:groove;
}
#cc{
width:1000px;
height:500px;
border-style:dotted;
}
#div1,#div2,#div3,#div4
{
float:left;
width:450px;
height:200px;
}
#div9
{
float:left;
width:420px;
height:60px;
}
#div5, #div6,#div7,#div8
{ border-color: #;
border-style: double;
width: 360px;
height: 100px;
}
#div1 {background-color:#CCC;}
#div5{background-color:#;}
#div2,#div6{background-color:#0F0;}
#div3,#div7{background-color:#FC6;}
#div4,#div8{background-color:#0FF;}
#div9{background-color:#3CC;}
#div5
{
position: absolute;
top: 36px;
left: 60px;
}
#div9
{
position: absolute;
top: 136px;
left: 60px;
}
#div6
{ position: relative;
top: 56px;
left: 60px;
}
#div7
{ position: relative;
top: 36px;
left: 60px;
}
#div8
{
position:fixed;
bottom: 70px;
right: 60px;
z-index:;
}
#div11
{
position:absolute;
top: 10px;
right: 10px;
height:80px;
width:180px;
border-style:double;
border-width:2px;
font-style:italic;
font-size:18px;
color:#F00;
}
</style>
<body>
<div id="cc" name = "div1" >
<div id="div1" name="Ndiv" >div1
<div id="div5">
div1-->absolute;<br/> position: absolute; top: 36px; left: 40px;
</div>
</div>
<div id="div2" name="Ndiv"> div2
<div id="div6">div2-->relative;<br/> position: relative; top: 56px; left: 30px;
<br/>
生成相对定位的元素，相对于其正常位置进行定位。
</div>
</div>
<div id="div3" name="Ndiv" > div3
<div id="div7">div3-->relative;<br/>position: relative; top: 36px; left: 40px;
<br/>
生成相对定位的元素，相对于其正常位置进行定位。
</div>
</div>
<div id="div4" name="Ndiv"> div4
<div id="div8">div4:fixed;<br/> position:fixed; top: 150px; left: 40px;
<br/>生成绝对定位的元<br/>素，相对于浏览器窗口进行定位。
<div id = "div11">
div4：fixed->div11<br/>
绝对定位：absolute<br/>
第一个已经定位的父元素：div8<br/>
</div>
</div>
<div id="div9">
div4-->absolute;<br/> position: absolute; top: 36px; left: 40px;
<br/>
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 </div>
</div>
</div>
</body>
</html>
CSS笔记1：属性--定位的更多相关文章
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- HTML+CSS笔记 CSS进阶再续
CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...
- CSS笔记
初级篇===========================选择器============================元素选择器css:h1{color: red}html:<h1> ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- jquery笔记之属性选择器 查找以某种条件开头的页面元素
jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...
- CSS有三种基本的定位机制
CSS有三种基本的定位机制:普通流,浮动和绝对定位. 普通流:在普通流中元素框的位置由元素在html中的位置决定, 1.元素position属性为static或继承来的static时就会按照普通流定位 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- [Selenium]中使用css选择器进行元素定位
参考:http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html 常见语法 * 通用元素选择器,匹配任何元素 E 标签选择器,匹配所有 ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
随机推荐
- 面试官问我，Redis分布式锁如何续期？懵了。
前言 上一篇[面试官问我,使用Dubbo有没有遇到一些坑?我笑了.]之后,又有一位粉丝和我说在面试过程中被虐了.鉴于这位粉丝是之前肥朝的粉丝,而且周一又要开启新一轮的面试,为了回馈他长期以来的支持,所 ...
- SpringBoot 项目打包后运行报 org.apache.ibatis.binding.BindingException
今天把本地的一个SpringBoot项目打包扔到Linux服务器上,启动执行,接口一访问就报错,但是在本地Eclipse中启动执行不报错,错误如下: org.apache.ibatis.binding ...
- C++ Opencv split()通道分离函数 merge()通道合并函数 使用操作详解
一. split()通道分离函数 split()函数的C++版本有两个原型,他们分别是: C++: void split(const Mat& src, Mat*mvbegin);//& ...
- Java回调机制总结
调用和回调机制 在一个应用系统中, 无论使用何种语言开发, 必然存在模块之间的调用, 调用的方式分为几种: 1.同步调用 同步调用是最基本并且最简单的一种调用方式, 类A的方法a()调用类B的方法b( ...
- redux源码学习笔记 - applyMiddleware
在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...
- Node.js项目拆包工程化
背景 在我们开发的过程中,经常会遇到这样的问题,开发完了一些代码或者一个接口,别的小伙伴过来问你,代码可不可以给他复用,接口可以给他调用.这说明代码的复用和抽象对团队协作是很重要的.举个例子,如下图 ...
- requests 处理异常错误 requests.exceptions.ConnectionError HTTPSConnectionPool [Errno 10060]
使用python requests模块调用vmallarg.vmall.com接口API时报如下错误: requests.exceptions.ConnectionError: HTTPSConnec ...
- springBoot(9)---定时任务,异步任务
定时任务,异步任务 一.定时任务 1.步骤: 1:在启动类上写@EnableScheduling注解 2:在要定时任务的类上写@component 3:在要定时执行的方法上写@Scheduled(fi ...
- 通过Microsoft Learn进行学习以提升技能
通过 Microsoft Learn,可以免费而且轻松有趣地学习 Microsoft 技术. Microsoft Learn的与众不同 借助 Microsoft Learn,任何人都能按自己的学习计划 ...
- sql server 索引阐述系列一索引概述
一. 索引概述 关于介绍索引,有一种“文章太守,挥毫万字,一饮千钟”的豪迈感觉,因为索引需要讲的知识点太多.在每个关系型数据库里都会作为重点介绍,因为索引关系着数据库的整体性能, 它在数据库性能优化里 ...