HTML之Position用法
在此,先做声明,本篇仅是摘录自互联网,个人认为这篇文章讲的很不错,附于此地与大家共同欣赏。
position的四个属性值:
1.relative
2.absolute
3.fixed
4.static
下面分别讲述这四个属性。
<div id="parent">
<div id="sub1">sub1</id>
<div id="sub2">sub2</id>
</div>
1. relative
relative属性相对比较简单,我们要搞清它是相对哪个对象来进行偏移的。答案是它本身的位置。在上面的代码中,sub1和sub2是同级关系,如果设定sub1一个relative属性,比如设置如下CSS代码:
#sub1
{
position: relative;
padding: 5px;
top: 5px;
left: 5px;
}
我们可以这样理解,如果不设置relative属性,sub1的位置按照正常的文档流,它应该处于某个位置。但当设置sub1为的position为relative后,将根据top,right,bottom,left的值按照它理应所在的位置进行偏移,relative的“相对的”意思也正体现于此。
对于此,您只需要记住,sub1如果不设置relative时它应该在哪里,一旦设置后就按照它理应在的位置进行偏移。
随后的问题是,sub2的位置又在哪里呢?答案是它原来在哪里,现在就在哪里,它的位置不会因为sub1增加了position的属性而发生改变。
如果此时把sub2的position也设置为relative,会发生什么现象?此时依然和sub1一样,按照它原来应有的位置进行偏移。
注意relative的偏移是基于对象的margin的左上侧的。
2. absolute
这个属性总是有人给出误导。说当position属性设为absolute后,总是按照浏览器窗口来进行定位的,这其实是错误的。实际上,这是fixed属性的特点。
当sub1的position设置为absolute后,其到底以谁为对象进行偏移呢?这里分为两种情况:
(1)当sub1的父对象(或曾祖父,只要是父级对象)parent也设置了position属性,且position的属性值为absolute或者relative时,也就是说,不是默认值的情况,此时sub1按照这个parent来进行定位。
注意,对象虽然确定好了,但有些细节需要您的注意,那就是我们到底以parent的哪个定位点来进行定位呢?如果parent设定了margin,border,padding等属性,那么这个定位点将忽略padding,将会从padding开始的地方(即只从padding的左上角开始)进行定位,也就是忽略padding,当然并不会忽略margin和border。
接下来的问题是,sub2的位置到哪里去了呢?由于当position设置为absolute后,会导致sub1溢出正常的文档流,就像它不属于 parent一样,它漂浮了起来,在DreamWeaver中把它称为“层”,其实意思是一样的。此时sub2将获得sub1的位置,它的文档流不再基于 sub1,而是直接从parent开始。
(2)如果sub1不存在一个有着position属性的父对象,那么那就会以body为定位对象,按照浏览器的窗口进行定位,这个比较容易理解。
3. fixed
fixed是特殊的absolute,即fixed总是以body为定位对象的,按照浏览器的窗口进行定位,即使拖动滚动条,他的位置也是不会改变的。与background-attachment:fixed相似
当然在Dreamweaver下似乎没有支持
4. static
position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。
转载于:https://www.cnblogs.com/ziyandeyanhuo/p/7877524.html
HTML之Position用法相关推荐
- position用法
position设置属性值后,还需要搭配left.top等值,才能发挥预期效果, 例如只设置position: absolute; 而不设置left等,则不会立即根据父级定位元素定位,但依然会脱离正常 ...
- html里position属性,科技常识:详解html中 position属性用法(四种)
今天小编跟大家讲解下有关详解html中 position属性用法(四种) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关详解html中 position属性用法(四种) 的相关资料,希望小 ...
- matlab 设置position 位置 /xlabel/legend位置的设置方式
subplot(211) subplot('Position',[0.1 0.57 0.8 0.38]); 学习 set(gca,'Position',[0.1 0.25 0.8 0.7]); ...
- javascript字符串方法总结
javascript中常用的字符串方法 String 的静态方法 fromCharCode:使用指定的Unicode值序列创建字符串 String.fromCharCode(num1, ..., nu ...
- android 触摸 唤醒屏幕,Android中屏幕保持唤醒
1.锁的类型 PowerManager中各种锁的类型对CPU .屏幕.键盘的影响: PARTIAL_WAKE_LOCK : 保持CPU 运转,屏幕和键盘灯有可能是关闭的. SCREEN_DIM_WAK ...
- 可以动态控制左右滑动的ViewPager, 禁止ViewPager左右滑动
可以动态控制左右滑动的ViewPager 禁止ViewPager左右滑动 package com.geaosu.test.act;import android.content.Context; imp ...
- WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
- CSS3_渐变、过渡和动画
一.CSS3渐变(Gradients) 1.1.简介: CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 1.2.浏览器兼容性 ie9及更早版本不支持渐变属性 1 ...
- matlab xlabel位置设置
xlabel('time','FontSize',12); 如果没有设置位置,默认是在中间 在xlabel中也有position用法 xlabel('time','position',[900,187 ...
最新文章
- 【生成模型】解读显式生成模型之完全可见置信网络FVBN
- 《人月神话》(P11)为舍弃而计划
- js温故而知新11(AJAX)——学习廖雪峰的js教程
- 这几部高分学科纪录片,助力孩子涨姿势拓视野~
- 一个本科生,只用了两年就拿下诺贝尔奖,拯救了无数糖尿病患者
- 某高校计算机系举办了一场,国家二级MS+OFFICE高级应用机试(操作题)-试卷25
- 【今日CS 视觉论文速览】Thu, 13 Dec 2018
- OpenCV3学习(11.6) ORB特征检测器及BRIEF描述符
- DeepFake技术--win7下faceswap环境配置(一)(二)(三)
- 写完十四章卡农后,莫比乌斯带属实是给巴赫玩明白了
- XP系统封装常用工具.ISO
- 小程序 web-view 打开 微信公众号文章
- 系统封装_Ghost光盘制作
- 说明关系型数据库通过索引提升查询效率的背后原理
- 考研线性代数:矩阵的合同关系,合同对角化以及一些坑
- 1万多个英语单词mp3下载
- 数据结构面试题php,最全最详细的PHP面试题(带有答案)
- Linux 文件目录压缩与解压命令
- MySQL 内部执行优化策略总结
- 2021-02-23 十进制转十六进制:
热门文章
- Python中使用wordcloud生成漂亮的中文词云
- 带你看明白class二进制文件!
- dart - 如何制作新数组嵌套排序映射
- 数据可视化模板_10分钟,做一份数据可视化分析报表
- PPT 下载 | 神策数据张涛:企业服务客户全生命周期运营三步曲客情诊断 解决方案库...
- 人文英语学习品牌「友邻优课」携手神策数据 精细化数据分析让每一次互动都有价值
- 001——数组(一)数组知识及foreach函数应用
- MVC layout 命名空间引用问题
- Redisbook学习笔记(3)数据类型之集合
- 将MSHFLEXGRID表格中数据导入Excel方法