css的position
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的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- CSS的position设置
CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
随机推荐
- qt界面操作
//控制死窗体 int width = this->geometry().width(); int height = this->geometry().height(); this-> ...
- HTML与CSS的一些知识(二)
续: 5.表单标签<form></form> 用于收集用户信息,统一提交到服务器 一般用input标签收集,再用提交按钮提交:input标签根据type属性值不同有不同的类型: ...
- JavaWeb网上商城项目中sql语句问题的解决
出现的问题 解决方法 对ProductDaoImpl建立Junit测试得到问题所在 学到了 Junit case测试验证和debug分步执行 mysql是关系型数据库.Redis是非关系型数据库且比m ...
- python程序—用户登录
编写一个用户登录程序: 1.登录成功显示登录页面 2.登录失败,显示密码错误,并且显示错误几次 3.登录失败三次,退出程序 username= 'root' passwd= ' count= prin ...
- 使用TLS证书保护Docker
使用TLS证书保护Docker 当我们使用远程调用docker时,未设置TLS的docker,将可以被任何人调用,这是极其危险的. 在阿里云上跑的docker,这次就被不怀好意的人扫描到了默认端口,2 ...
- tomcat中显示本地图片①(已解决)
解决方案 我直接放源码了. 原理就是:我虽然调用的是虚拟目录,但是会映射到对应路径的实际 第一步:(在tomcat的 server.xml中创建一个虚拟目录) 虚拟目录创建方式: <Contex ...
- lambda表达式应用在闭包中
def make_repeat(n): return lambda s : s * n a = make_repeat(2) print(a(8)) 等于 def make_repeat(n): de ...
- Go语言学习之12 etcd、contex、kafka消费实例、logagent
本节内容: 1. etcd介绍与使用 2. ElastcSearch介绍与使用 1. etcd介绍与使用 概念:高可用的分布式key-value存储,可以使用配置共享和服务发现 ...
- vs2015编译caffe
有些时候,需要在python3的环境下import caffe,需要用vs2015在python3的环境下,编译pycaffe. microsoft的windows版本的caffe,依赖的库Nuget ...
- 『计算机视觉』Region Proposal by Guided Anchoring
论文地址:Guided Anchoring 不得不佩服自媒体,直接找到了论文作者之一写了篇解析文章,这里给出链接,本文将引用一部分原作者的解析,减少我的打字量,也方便结合比照理解. 一.问题和思路 1 ...