1.标准流
2.浮动
3.定位
块级元素:div、H1-H6、有序及无序列表(ol、ul、li)、p
内联元素:a、span、img

1. 介绍

1.1 说明

Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。

1.2 主要的值

absolute :绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。

relative :相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

fixed :固定定位;类似于absolute,但不随着滚动条的移动而改变位置。

static :默认值;默认布局。

1.3 辅助属性

position属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,就需要使用下面的属性(position:static不支持这些):

①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。

②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。

③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。

④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。

上面属性的值可以为负,单位:px 。

先来看看relative

图1-1

图1-2

这里我们可以看出图1-2红色的图片相对路径是根据1-1的红色位置偏移的。

图1-3

经过对比1-2  我们可以知道1-3的偏移是根据1-1的红色图片所在位子偏移的

再来看看absolute

2-1图

我们可以知道absolute在这里是以父元素来定位的,所以是body ,那么他的定位点就是左上角,如图2-1来偏移

图2-2

图2-2和2-1不同的是定位变了,变成right和top,所以原点变成右上角

图2-3

absolute是以relative为定位点偏移

css的position的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. div+css定位position详解

    div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...

  3. 十步图解CSS的position

    CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...

  4. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  5. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  6. CSS的position(位置)

    position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...

  7. CSS的position设置

    CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...

  8. 关于CSS 的position定位问题

    对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...

  9. 《css定位 position》课程笔记

    这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...

  10. css的position中absolute和fixed的区别

    fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...

随机推荐

  1. qt界面操作

    //控制死窗体 int width = this->geometry().width(); int height = this->geometry().height(); this-> ...

  2. HTML与CSS的一些知识(二)

    续: 5.表单标签<form></form> 用于收集用户信息,统一提交到服务器 一般用input标签收集,再用提交按钮提交:input标签根据type属性值不同有不同的类型: ...

  3. JavaWeb网上商城项目中sql语句问题的解决

    出现的问题 解决方法 对ProductDaoImpl建立Junit测试得到问题所在 学到了 Junit case测试验证和debug分步执行 mysql是关系型数据库.Redis是非关系型数据库且比m ...

  4. python程序—用户登录

    编写一个用户登录程序: 1.登录成功显示登录页面 2.登录失败,显示密码错误,并且显示错误几次 3.登录失败三次,退出程序 username= 'root' passwd= ' count= prin ...

  5. 使用TLS证书保护Docker

    使用TLS证书保护Docker 当我们使用远程调用docker时,未设置TLS的docker,将可以被任何人调用,这是极其危险的. 在阿里云上跑的docker,这次就被不怀好意的人扫描到了默认端口,2 ...

  6. tomcat中显示本地图片①(已解决)

    解决方案 我直接放源码了. 原理就是:我虽然调用的是虚拟目录,但是会映射到对应路径的实际 第一步:(在tomcat的 server.xml中创建一个虚拟目录) 虚拟目录创建方式: <Contex ...

  7. lambda表达式应用在闭包中

    def make_repeat(n): return lambda s : s * n a = make_repeat(2) print(a(8)) 等于 def make_repeat(n): de ...

  8. Go语言学习之12 etcd、contex、kafka消费实例、logagent

    本节内容:    1. etcd介绍与使用    2. ElastcSearch介绍与使用 1. etcd介绍与使用    概念:高可用的分布式key-value存储,可以使用配置共享和服务发现    ...

  9. vs2015编译caffe

    有些时候,需要在python3的环境下import caffe,需要用vs2015在python3的环境下,编译pycaffe. microsoft的windows版本的caffe,依赖的库Nuget ...

  10. 『计算机视觉』Region Proposal by Guided Anchoring

    论文地址:Guided Anchoring 不得不佩服自媒体,直接找到了论文作者之一写了篇解析文章,这里给出链接,本文将引用一部分原作者的解析,减少我的打字量,也方便结合比照理解. 一.问题和思路 1 ...