关于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)定义的顺序

1 <style>
2     div{position: relative;height: 100px;width: 100px;}
3     span{position: absolute;height: 50px;width: 50px;top: 10px;left: 10px;}
4 </style>
5 <body>
6     <div>
7          <span>ddddd<span>
8     </div>
9 </body>

  9)left和right  /top和bottom   在一个对象中只能选一种来定义

  10)切勿滥用

3.固定定位:可想而知。。。无论怎么移动,它永远都在那里,一直与你同在。。哈哈

参考:http://www.barelyfitz.com/screencast/html-training/css/positioning/

中文:http://blog.jobbole.com/49320/

如果有什么不对的或者要补的地方 可以说出来吗?[可伶.gif]谢谢![玫瑰.jpg]

一直往前走吧 别想那么多了 还有青春可以耗  ——小晴哥

时间: 07-27

关于position的相关文章

UnicodeDecodeError: &#39;ascii&#39; codec can&#39;t decode byte 0xe0 in position 0

Windows 7/8/10机器上安装Python 2.7后,下载一些Package包进行setup时总是报错UnicodeDecodeError,如下: File "C:/Python27/lib/mimetypes.py", line 250, in enum_types ctype = ctype.encode(default_encoding) # omit in 3.x! UnicodeDecodeError: 'ascii' codec can't decode byte

20170427报错UnicodeEncodeError: ‘gbk’ codec can’t encode character ‘\xa0’ in position

今天写python,将网上数据流编写进文件里时遇到的,网上搜到结果并正确的进行了处理,把原文解决方法拷过来了,嘿嘿 使用Python写文件的时候,或者将网络数据流写入到本地文件的时候,大部分情况下会遇到:UnicodeEncodeError: 'gbk' codec can't encode character '\xa0' in position - 这个问题. 网络上有很多类似的文件讲述如何解决这个问题,但是无非就是encode,decode相关的,这是导致该问题出现的真正原因吗?不是的.

[lintcode 14] First Position of Target

For a given sorted array (ascending order) and a target number, find the first index of this number in O(log n) time complexity. If the target number does not exist in the array, return -1. Example If the array is [1, 2, 3, 3, 4, 5, 10], for given ta

CSS3之position

1.取值 (1)absolute (2)fixed (3)inherit (4)relative (5)static (6)!important 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:/

&lt;转载&gt;DIV+CSS position定位方法总结

如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative(相对)以及absolute(绝对). [DIV+CSS布局之position属性:absolute] 意思是:他的意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面

phpcms v9中 action=&quot;position&quot; 和action=&quot;lists&quot;有什么区别, 以及action 的属性和值

action值的含义: lists 内容数据(文章?)列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 position 内容推荐位列表 phpcms v9中 action="position" 和action="lists"有什么区别, 以及action 的属性和值,布布扣,bubuko.com

CSS position 属性

实例 定位 h2 元素: h2 { position:absolute; left:100px; top:150px; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera           所有主流浏览器都支持 position 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 position 属性规定元素的定位类型. 说明 这个属性定义建立元素布局所用的定位机制.

解决ios、微信移动端的position: fixed; 支持性不好的问题 &amp;&amp; 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

UnicodeEncodeError: &#39;ascii&#39; codec can&#39;t encode character u&#39;\u5728&#39; in position 1

s = "图片picture"print chardet.detect(s) for c in s.decode('utf-8'): print c UnicodeEncodeError: 'ascii' codec can't encode character u'\u5728' in position 1 解决方案: reload(sys) sys.setdefaultencoding("utf8") UnicodeEncodeError: 'ascii' co

布局模型 之 层模型(position的relative、absolute与fixed区别?)

css的布局模型分为流动模型(Flow).浮动模型(Float).层模型(Layer). 浮动模型(Float)和层模型(Layer)有什么显著区别?     浮动模型(Float):浮动是让某元素脱离文档流的限制,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动:浮动的元素仍然会占据文档流的物理空间.关于浮动模型的详细说明请看另一篇文章的介绍.http://ycgit.blog.51cto.com/8590215/1958452 层模型(Layer):设置为层模型的元