文档章节

CSS Position学习

路小磊
 路小磊
发布于 2015/01/09 18:22
字数 469
阅读 166
收藏 16
点赞 1
评论 0

介绍

CSS Position有四个属性:

  1. relative
  2. absolute
  3. fixed
  4. static(默认)

样例

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</div>

sub1和sub2是同级关系,parent是它们的父级元素。

1. relative(相对定位)

相对定位指的是相对于这个元素原位置的定位,且会占住原来的位置。

所谓原位置指不设置relative属性时它的位置(既static属性时的位置)

relative偏移相对的是margin的左上侧。

例如对sub1设置relative属性后,会根据top,right,bottom,left属性偏移,而sub2的位置不变(sub1会占住原来的位置)

relative_sub1

再对sub2设置relative属性,它也会相对其原来的位置偏移(sub2位置还会被占着)

relative_sub1

2. absolute(绝对定位)

绝对定位是根据其最近进行定位的父对象的 padding 的左上角进行定位,基本分为以下两种情况:

  1. 例如对sub1设置absolute,如果sub1的父级元素(parent或者其父级元素)设置了absolute或relative,那么sub1就会相对这个父元素定位。
  2. 如果父级元素都没有设置absolute或relative,那sub1相对body定位。

这时由于sub1的位置“腾出来了”,sub2就会跑到sub1的位置(也可以理解sub1浮起来了,dreamweaver中叫做层),它的文档流就会基于parent。

absolute_sub1

如果再对sub2设置absolute,那其也是相对parent的。

absolute_sub2

3. fixed

fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位。

4. static(默认)

position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。


参考:

http://www.cnblogs.com/Zigzag/archive/2009/02/19/position.html

http://www.w3school.com.cn/css/css_positioning.asp

© 著作权归作者所有

共有 人打赏支持
路小磊

路小磊

粉丝 279
博文 53
码字总数 39918
作品 5
乌海
程序员
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
05/11
0
0
web前端小案例-爱新鲜抽屉式特效

用简短的javascript代码编写出爱新鲜抽屉式特效 知识点:企业布局技巧,如何高效的编写CSS样式,常用选择器,基本标签,动态布局,盒子模型,jquery类库调用,JS特效编写,JS编程思维等。 ?...

急速奔跑中的蜗牛
2017/12/04
0
0
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题

一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right 就可以实现。   CSS代码可以如下写: 如上代码就可以实现效果。 第2种方法:左侧同样用margin-right ...

喵王不瞌睡
2014/10/23
0
0
CSS3 表单验证

今天从网上看到一篇介绍CSS表单验证的文章,感觉很有意思,摘抄下来,学习学习。

musishui
2016/06/22
6
0
谈谈面试与面试题

来源:wintercn,作者微博:@寒冬winter 起因,某日电话面试之后满心郁闷的我发了两条微博: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺...

2013/05/06
0
0
WEB前端学习面试:用CSS画一个等边三角形

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/30
0
0
纯HTML+CSS实现阿童木头像

他有十万马力,能上天能入地;他分辨善恶,是勇敢正义化身;1963年,他登上荧幕,在日本创下了未曾有过的高收视率……他叫阿童木,一个纯真、善良、勇 敢的机器娃娃。“阿童木之父”手冢治虫...

WEB攻程狮
2017/11/06
0
0
div层调整z-index属性无效原因分析及解决方法

这是在学习css中遇到的一个问题。 div层调整zindex属性在IE中无效原因分析及解决方法 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的pos...

球球
06/12
0
0
关于position和float的初级理解和对未来的一些想法

在现在传统的网页布局里一般都离不开float和position,因为这段时间用纯html和css编写代码,对一些页面布局也有了自己的一些理解,并且也看了一些大神对于float和position的一些观点,所以写...

德拉费尔
2013/06/13
0
4
javascript开发QQ空间相册展示

QQ空间相册展示 知识点:html/css布局思维,浮动/定位详解,大企业标准,代码性能优化,js鼠标事件,DOM操作等。 👇源码: Document

急速奔跑中的蜗牛
2017/12/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python爬取站长素材网页图片保存到ppt中

网站地址:http://sc.chinaz.com/tupian/index.html 直接上代码: import requestsfrom bs4 import BeautifulSoupfrom pptx import Presentationfrom pptx.util import Inchesimpor......

你为什么不吃药
5分钟前
0
0
Ubuntu 18.04 swap空间的修改

一、准备工作 执行“sudo swapon -s”命令,查看是否已经存在swap file 二、修改swap file # 如果第一步存在swapfile则需要先禁用sudo swapoff /swapfile# 修改swap 空间的大小为2Gs...

Iceberg_XTY
8分钟前
1
0
438. Find All Anagrams in a String - LeetCode

Question 438. Find All Anagrams in a String Solution 题目大意:给两个字符串,s和p,求p在s中出现的位置,p串中的字符无序,ab=ba 思路:起初想的是求p的全排列,保存到set中,遍历s,如...

yysue
14分钟前
0
0
RabbitMQ实战:五种模式和案例

本文来自:Rabbitmq的五种模式和案例 消息生产者p将消息放入队列 消费者监听队列,如果队列中有消息,就消费掉,消息被拿走后,自动从队列删除 (隐患,消息可能没有被消费者正确处理,已经消失了,...

spinachgit
15分钟前
0
0
android基于MVP小说网络爬虫、宝贝社区APP、仿虎扑钉钉应用、滑动阴影效果等源码

Android精选源码 android宝贝社区app源码 android仿Tinder最漂亮的一个滑动效果 android仿滴滴打车开具页,ListView粘性Header Android基于MVP模式开发的小说网络书库带缓存网络爬虫,。 Easy...

逆鳞龙
18分钟前
0
0
第三章 spring-bean之beanFactory系列(1)

前言 spring的基本问题,每次面试基本会问题。比如 - spring是什么回答是ioc,aop,第三个就是beanfactory。 - spring使用什么模式,100%的人回答是工厂模式。 - 这面的问题大家都知道。关于...

鸟菜啊
20分钟前
0
0
箭头函数

var foo = v => v;// 等同于var foo = function (v) {return v;} 如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分 var f = () => 5;// 等同于var f = functio...

litCabbage
21分钟前
0
0
软件入门的知识之程序设计语言Java和C#的简单介绍和对比[图]

软件入门的知识之程序设计语言Java和C#的简单介绍和对比[图]: 前言: 要做软件就必然会涉及到程序设计语言,它是什么?有哪些特点?又有哪几部分组成的呢?在这里我们为大家做了一个总结,希...

原创小博客
22分钟前
0
0
重写视频播放进度条

需要注意的地方,基于html vedio 标准使用期去了解一下 1.想去掉视频默认的播放条,去掉controls属性。 2.需要预加载视频加上preload="auto"属性。 1.js代码 $(function(){ init(); }); var ...

轻量级赤影
30分钟前
0
0
saltstack管理任务计划-添加&删除

1.服务端配置 >>编辑 top.sls 文件 # vim /srv/salt/top.sls //修改为如下 base: '192.168.*.*': - crontest >>编辑crontest.sls文件添加计划任务 cron-test: cron.present: - name: /bin/to......

硅谷课堂
31分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部