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则会随滚动条移动 常用场 ...
随机推荐
- JS实现打开本地文件或文件夹 ActiveXObject
IE浏览器打开C盘,测试可用. 如果浏览器报错提示:ActiveXObject is not defined Internet 选项 -> 安全 - >安全级别,调低级别 function ...
- 【Java基础】浅谈常见设计模式
Num1:单例模式 基本概念:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 常见写法: 懒汉式 public class Singleton { /* 持有私有静态实例,防止被引用,此处赋值 ...
- 查看selenium API
pydoc是Python自带的模块,主要用于从python模块中自动生成文档,这些文档可以基于文本呈现的.也可以生成WEB 页面的,还可以在服务器上以浏览器的方式呈现! 一.pydoc 1.到底什么是 ...
- HDU 1074 Doing Homework【状压DP】
Doing Homework Problem Description Ignatius has just come back school from the 30th ACM/ICPC. Now he ...
- UVA - 12298 Super Poker II NTT
UVA - 12298 Super Poker II NTT 链接 Vjudge 思路 暴力开个桶,然后统计,不过会T,用ntt或者fft,ntt用个大模数就行了,百度搜索"NTT大模数&q ...
- 5、Docker容器网络
使用Linux进行IP层网络管理的指 http://linux-ip.net/html/ # yum install iproute http://linux-ip.net/html/tool ...
- Unity3D|-XLua热更新用法的大致流程
xlua是由腾讯维护的一个开源项目,我们可以在github上下载这个开源项目并查看一些相关文档 官网:https://github.com/Tencent/xLua 配置文档:https://gith ...
- Windows下安装Anaconda
Windows下安装Anaconda Anaconda介绍 Anaconda指的是一个开源的Python发行版本,其包含了conda.Python等180多个科学包及其依赖项.因为包含了大量的科学 ...
- SQL Server 视图(仅代码及练习)
use electric go --建立供电局1#仓库所存放物资的视图. create view s1_stock as select * from stock where warehouse='供电 ...
- java反射使用和源码解析
1 反射 1.1 什么是反射 正射:指的是我们知道类的定义和类中的方法名称,直接先创建对象,然后通过对象去调用方法.例如: Apple apple = new A ...