关于position
一、position
一)语法:
看了那么久的语法,终于到了讲正题的时间了。
二)定位
1.相对定位:相对元素自己在没有定位之前的位置进行位移,元素仍然保留还没有原来的位置。
特性:
1)不脱离文档流;
2)不影响元素本身的特性,行内元素是行内元素,块是块元素;
3)如果没有给定位的值(top/right/bottom/left),对元素本身没有影响。
2.绝对定位:(一般配合相对定位来使用)相对于已经定位的最接近的祖先元素进行位移。
注意:”父相子绝“如果没有找到绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是body/html。
以下是的父元素是设置了相对定位;
特性:
1)脱离文档流;
2)行内元素支持宽高;(类似于float)
3)块级元素”撑开“宽高;
4)没有找到绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是body/htm;
5)一般配合”相对定位“使用”父相子绝“;
6)不支持margin:auto;
7)绝对定位与float浮动不能同时使用;比如:一个大盒子里有用绝对定位或css float浮动定位,则IE6.0则不显示将对象改大的绝对定位或相对定位;
8)定义的顺序
<style>
div{position: relative;height: 100px;width: 100px;}
span{position: absolute;height: 50px;width: 50px;top: 10px;left: 10px;}
</style>
<body>
<div>
<span>ddddd<span>
</div>
</body>
9)left和right /top和bottom 在一个对象中只能选一种来定义
10)切勿滥用
3.固定定位:可想而知。。。无论怎么移动,它永远都在那里,一直与你同在。。哈哈
参考:http://www.barelyfitz.com/screencast/html-training/css/positioning/
中文:http://blog.jobbole.com/49320/
如果有什么不对的或者要补的地方 可以说出来吗?[可伶.gif]谢谢![玫瑰.jpg]
一直往前走吧 别想那么多了 还有青春可以耗 ——小晴哥
关于position的更多相关文章
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- 对CSS中的Position、Float属性的一些深入探讨
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
- css知多少(11)——position
1. 引言 本文将用一篇文章介绍position(定位),在学习position之前,我们应该去思考一个问题:什么情况下我们需要定位?如果没有定位将无法满足我们怎样的需求?我们要知道,被人类创造出来的 ...
- Android之RecyclerView的原生Bug-Inconsistency detected. Invalid view holder adapter positionViewHolder{a1bbfa3 position=2 id=-1, oldPos=-1, pLpos:-1 no parent}
今天在运行自己编写的App时,突然发现App在运行时闪退,然后就查看了Android Studio的Log,发现了这个错误,上网查了一下,才知道是RecyclerView的原生Bug,在数据更新时会出 ...
- 函数:MySQL中字符串匹配函数LOCATE和POSITION使用方法
1. 用法一 LOCATE(substr,str) POSITION(substr IN str) 函数返回子串substr在字符串str中第一次出现的位置.如果子串substr在str中不存在,返回 ...
- CSS:position:fixed使用(转)
position属性规定元素的定位类型,即建立元素布局所用的定位机制.任何元素都可以定位,不过绝对定位或固定定位元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认 ...
- position导致Safari工具栏不自动隐藏
一般情况下,移动端网页在上滑的时候,Safari的工具栏会自动隐藏掉,下滑的时候又会出现. 但是,如果可滑动区域的最外层box写了position:absolute,就不会自动隐藏了. 例如像这样的页 ...
- 元素堆叠问题、z-index、position
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
随机推荐
- sed的用法
1.什么是sed sed命令是一个流线式.非交互式编辑器,可以实现在vi等编辑器中一样的编辑效果. 2.sed的工作原理 模式空间(pattern space) sed一次处理一行文本(或输入), ...
- TestNG+ExtentReports生成超漂亮的测试报告
一个优雅.漂亮的测试报告,能够给我们的测试工作带来不少的加分,而报告的模版实在是让我们这些技术人员头疼的问题,设计的实在是没有什么美感. 那么今天就给大家分享一个自动化测试中,一个超漂亮的测试报告模版 ...
- python大规模爬取京东
python大规模爬取京东 主要工具 scrapy BeautifulSoup requests 分析步骤 打开京东首页,输入裤子将会看到页面跳转到了这里,这就是我们要分析的起点 我们可以看到这个页面 ...
- JavaScript表单验证和正则表达式
JavaScript表单验证 分为四类: 1.非空验证 常用于用户名等 2.相等验证 常用于验证两次输入的密码 3.范围验证 常用于年龄等 4.正则验证 用于手机号,邮箱号等 以下是实例: <! ...
- OpenCV探索之路(十七):Mat和IplImage访问每个像素的方法总结
在opencv的编程中,遍历访问图像元素是经常遇到的操作,掌握其方法非常重要,无论是Mat类的像素访问,还是IplImage结构体的访问的方法,都必须扎实掌握,毕竟,图像处理本质上就是对像素的各种操作 ...
- my97自定义事件
onFocus="WdatePicker({onpicked:function(){alert(0);}})"
- 一起学习c++11——c++11中的新增的容器
c++11新增的容器1:array array最早是在boost中出现:http://www.boost.org/doc/libs/1_61_0/doc/html/array.html 当时的初衷是希 ...
- 【Android Developers Training】 73. 布局变化的动画
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- Kotlin入门第四课:简单工厂模式
Kotlin基础知识的学习,请参考之前的文章: Kotlin入门第一课:从对比Java开始 Kotlin入门第二课:集合操作 Kotlin入门第三课:数据类型 初次尝试用Kotlin实现Android ...
- Java编码问题汇总
转自 http://www.blogjava.net/zhangchao/archive/2011/05/26/351051.html Thanks Java编码问题汇总 工作中经常遇到java编码问 ...