酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

html

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

详解4种html中position属性用法

来源:互联网搜集 作者:秩名 人气: 发布时间:2018-10-27
本篇文章主要介绍了详解4种html中position属性用法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

本文给大家介绍4种html中position属性用法。

position的四个属性值:

1.relative
2.absolute
3.fixed
4.static


下面分别讲述这四个属性:

 

<div id="parent">
     <div id="sub1">sub1</div>
     <div id="sub2">sub2</div>
</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属性时,会按照正常的文档流进行排列。


 

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:

相关文章

  • 详解网页编码之GB2312、GBK与UTF-8的区别

    详解网页编码之GB2312、GBK与UTF-8的区别

    首先,我们要明白,GB2312、GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码。只是对于我们中国人的网站来说,用这三种编码 比较多。简单的说一下,为什么要用编码,在计算机内,储存文本信息用ASC II码,每一个字符对应着唯一......
    12-22
  • 解决使用html2canvas对有百度地图的Dom元素处理成图片

    解决使用html2canvas对有百度地图的Dom元素处理成图片

    问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass 解决 :使用百度地图......
    10-14
  • html/css中float浮动的用法示例教程

    html/css中float浮动的用法示例教程

    一、float基础用法示例 1、我们先建两个div盒子,设置高度、宽度和背景颜色; 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置。 ......
    09-10
  • html的几种水平垂直居中的方式(基础)总结

    html的几种水平垂直居中的方式(基础)总结

    我们在编写马过程中,想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。 第一种方法 !--html盒子代码--!--水平垂直居中--div class=Centered1 pd第一种/p/div!-css样式部分-- .Centered1......
    08-24
  • HTML中的if判断用法解析

    HTML中的if判断用法解析

    在django的web开发过程中,编写html时,从后端传入同名列表变量,但是内容格式有所区别,需要分别判断,查阅了很多文章试了好几种方法,格式似乎都不太对(本人没有系统学习过前端,基本都是照葫芦画瓢)后来找到django框架下html的if用......
    08-24
  • HTML实现检测输入已完成功能的方法

    HTML实现检测输入已完成功能的方法

    使用onInput(event)检测是否在输入 使用onporpertychange=onChange(event)检测是否内容发生改变 使用onBlur=finnishInput(event)检测是否失去焦点 可以通过先检测是否在输入,记下状态,如果上次在输入信息,然后失去焦点,则可以判断为......
    04-18
  • main标签的作用介绍

    main标签的作用介绍

    本篇文章介绍main标签的作用。 main标签的作用是什么? main标签规定文档的主要内容,main的主要目的是将ARIA的地标性作用main映射到 HTML中的元素,这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。 说明:main......
    02-11
  • 实现HTML页面局部刷新的代码方法

    实现HTML页面局部刷新的代码方法

    本篇文章给大家介绍实现HTML页面局部刷新的代码方法。 事件响应刷新:有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求; 2、通过Ajax将用户请求提交至服务器,服务器处理后......
    01-06
  • 详解4种html中position属性用法

    详解4种html中position属性用法

    本文给大家介绍4种html中position属性用法。 position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性: div id=parent div id=sub1sub1/div div id=sub2sub2/div/div 1. relative relative属性相对比较......
    10-27
  • HTML实现双11抢劵(设定时间打开抢券的页面)的方法

    HTML实现双11抢劵(设定时间打开抢券的页面)的方法

    本篇文章给大家介绍HTML实现双11抢劵(设定时间打开抢券的页面)的方法 小编就直接给大家贴代码了,具体代码如下所示: !DOCTYPE htmlhtml lang=en xmlns=http://www.w3.org/1999/xhtmlhead meta charset=utf-8 / title/title style type=t......
    08-26

最新更新