CSS定位

标签: position absolute relative fixed static
4人阅读 评论(0) 收藏 举报
分类:

绝对定位(position: absolute;):

1、绝对定位是脱离了文档流,不会独占一行,它的方位只会受到top,left,bottom,right的影响。

2、一个块的top,left,bottom,right 是相对于什么呢?

1)如果它父元素做了定位,就相对于的是最近的一个父元素。

2)如果父元素没有定位,就相对于Body。

以下一段话引用自张鑫旭《absolute绝对定位的非绝对定位用法》:

position为absolute的元素如果没有设置left, top等值与left:0;top:0的的效果为何不一样?相信您应该知道答案了,例如一个div中有个absolute属性元素,其没有left或是top值,其会像个普通的inline-block属性元素一样静静地呆在这个div里面,但是一旦设置了left:0;top:0对不起,这个absolute元素立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative属性的祖先标签定位(如果没有,就body定位)。


相对定位(position: relative;):

3、相对定位没有脱离文档流,会单独占满一行,它的方位还会受到top,left,bottom,right的影响。

4、相对定位的top,left,right,bottom是相对于块的最近的一个父元素。


5、一旦脱离文档流就不能设置浮动。


固定定位(position: fixed;):

6、固定定位脱离了文档流,不会单独占满一行。

7、top,left,right,bottom 始终相对的是body。


静止定位(position:static;):

8、默认为静止定位。此种情况top,left,right,bottom 不发挥作用。



查看评论

iOS GPS定位-地图显示、定位| 高德地图| 百度地图

本课程由扣丁学堂教学总监郭宏志老师讲授,主要讲解了GPS定位这一专题,内容包括:使用mkmapview显示地图、Cllocationmanager获得经纬度、在地图上标注位置、使用clgeocoder、使用高德地图、使用百度地图等知识。
  • 2015年11月26日 14:50

CSS之四种定位的理解

Static 这个是元素的默认定位方式,元素出现在正常的文档流中,会占用页面空间。不能使用top,bottom,left,right和z-index。 Relative 相对定位方式,相对于其...
  • Mr_28
  • Mr_28
  • 2017-02-03 14:18:07
  • 3962

CSS中常用的几种定位方式

CSS中常用的几种定位方式 第一类 float定位(即浮动定位): 这种定位方式很简单,只需规定一个浮动的方向(如:float:left;就表示这个元素向左边摆放),它的定位是相对于父元素容...
  • itHeima_Liu
  • itHeima_Liu
  • 2017-05-16 17:50:57
  • 1374

浅谈CSS的几种定位

1、绝对定位(absolute) 将被赋予绝对定位的元素从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位,如果元素的父级没有...
  • zhouziyu2011
  • zhouziyu2011
  • 2016-12-08 11:45:37
  • 613

selenium实践-用css去定位元素

一直以来都用xpath去识别元素,xpath确识方便又实用,但有时会发现它要写很长很长,对于有些元素,用css去定位,可能更加方便。 假设有如下的HTML页面: line 1  line 2  ...
  • rital
  • rital
  • 2011-09-09 11:46:21
  • 8820

CSS中的三种基本的定位机制(普通流、定位、浮动)

一、普通流   普通流中元素框的位置由元素在XHTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。   普通流就是html文档中...
  • chelen_jak
  • chelen_jak
  • 2014-12-16 17:03:46
  • 8978

css如何定位大图中的小图标

Document div {width:62px;height:67px;}//定义div的宽高 div{background-image:url(img/pic.jpg);}//定义背景图片...
  • u010046887
  • u010046887
  • 2014-03-30 15:20:11
  • 2292

元素定位---使用 CSS 选择器定位元素

1.使用绝对路径来定位元素 CSS 绝对路径指的是在 DOM 结构中具体的位置。下面一个例子,使用绝对路径来定位用户 名输入字段。在使用绝对路径的时候,每个元素之间要有一个空格。 WebEl...
  • adonis_lu37
  • adonis_lu37
  • 2017-08-09 15:28:49
  • 301

【WebDriver】selenium使用CSS定位页面元素

一、CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selec...
  • galen2016
  • galen2016
  • 2017-05-04 10:04:36
  • 5917

Robot Framework自动化测试-元素定位之css

有了前面介绍的id、name、xpath定位方式,对于平时需要使用的定位方式基本都能做到,接下来在介绍一个稍微有点难度的css定位。css定位灵活,方便,但需要有点点基础。 还是以百度搜索的为例做说...
  • cz9025
  • cz9025
  • 2017-04-20 14:35:26
  • 1633
    个人资料
    等级:
    访问量: 77
    积分: 21
    排名: 209万+
    文章分类
    文章存档