position 定位属性,检索对象的定位方式

一、语法:position:static /absolute/relative/fixed

取值:

1、static:默认值,无特殊定位,对象遵循HTML原则;

2、absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位;如果不存在这样的父对象,则依据html(根元素),而其层叠通过z-index属性定义;

3、relative :相对定位,对象不可层叠,将依据right,top,left,bottom(相对定位)

等属性在正常文档流中偏移位置(相对自己原来的位置偏移)

4、fixed:固定定位,对象定位遵从绝对定位方式(absolute);但是要遵守一些规范(IE6浏览器不支持此定位)根据浏览器的窗口来定义自己的位置。

二、包含块的概念及作用

包含块是绝对定位的基础,包含块就是为决定定位元素提供坐标,偏移和显示范围的参照物,即确定绝对定位的偏移起点和百分比 长度的参考;



默认状态下,html是一个大的包含块,所有绝对定位的元素都是根据根元素来定自己所处的位置和百分比大小的显示的,如果我们定义了包含元素为包含块以后,对于被包含的绝对定位元素来说,就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。



定义元素为包含块:给绝对定位元素的父元素添加声明position:relative;

如果我们的父素设置了position:absolute;那么子元素也会相对父元素来定义自己的位置。

三、绝对定位和相对定位的区别

1、参照物不同绝对定位的参照物是包含块,相对定位的参照物是元素本身位置;

2、绝对定位将对象从文档流中拖离出来因此不占据空间,相对定位不破坏正常的文档流顺序无论是否进行移动,元素仍然占据原来的空间。

四、定位元素层叠属性:

z-index : auto | number

检索或设置对象的层叠顺序。

auto:默认值。遵从其父对象

number:无单位的整数值。可为负数

说明:

1)较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值,那么将依据它们在HTML文档中声明的顺序层叠。

此属性仅仅作用于 position 属性值为 relative 或 absolute,fixed 的对象。

五、透明属性

IE8以下浏览器写法:filter:alpha(opacity=value);取值范围 1-100

兼容其他浏览器写法:opacity:.value;(value的取值范围0-1,0.1,0.2,0.3-----0.9)

background:rgba(255,255,0,0.5);IE8以上的浏览器,不会影响内容的透明度

六、命名锚点链接的应用

定义:是网页制作中超级链接的一种,又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍。

命名锚点链接的应用:

1)命名锚点的作用:在同一页面内的不同位置进行跳转。

2)给元素定义命名锚记名

语法:<标记 id="命名锚记名"> </标记>

3)命名锚记连接

语法:<a href="#命名锚记名称"></a>

HTML基础--position 绝对定位 相对定位 锚点链接的更多相关文章

  1. 前端HTML 定位position 绝对定位 相对定位

    >>>position:absolute;绝对定位 当前元素相对于父级元素位置[该父级元素必须也设定了position,不然会继续往上找祖先元素,直到body为止]的定位 >& ...

  2. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  3. div锚点链接跳转

    a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...

  4. jquery 监听所有锚点链接实现平滑移动

    jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...

  5. 微信公众平台回复链接可以直接访问,但不能是锚文字链接<a>标签

    最近在学习微信公众平台开发,由于编辑模式和开发模式不可同时开启,在开发模式下如果访客发送关键字过来暂时无法实现关键词自动回复,客服人员先用链接网址直接回复订阅用户,但请注意不能是文字链接,即<a ...

  6. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  7. 锚点链接和hash属性

    相信大家挺经常见过这样一个效果.有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置. 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就 ...

  8. jquer导航锚点链接动画效果和返回顶部代码

    $(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...

  9. html邮件链接和锚点链接

    锚点链接: 锚点链接: 标记:<a name="XXX"></a> 取读:<a href="#XXX"></a> ...

随机推荐

  1. zoj 1874 水题,输出格式大坑

    Primary Arithmetic Time Limit: 2 Seconds      Memory Limit: 65536 KB Children are taught to add mult ...

  2. MVC使用jQuery从视图向控制器传递Model,数据验证,MVC HTML辅助方法小结

    //MVC HTML辅助类常用方法记录 (1)@Html.DisplayNameFor(model => model.Title)是显示列名, (2)@Html.DisplayFor(model ...

  3. redis的sentinel主从切换(failover)与Jedis线程池自动重连

    本文介绍如何通过sentinel监控redis主从集群,并通过jedis自动切换ip和端口. 1.配置redis主从实例 10.93.21.21:6379 10.93.21.21:6389 10.93 ...

  4. Echarts数据可视化series-scatter散点图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  5. 自学spring AOP

    本人是一个编程新手也是第一次写博客 这篇文章是我结合网上的资料和一些书籍学的 如果有不对之处请留言告知 本文介绍了AOP的两个知识点 1: 代理 代理有两种 我先写:Java静态代理 1:建立一个接口 ...

  6. Python装饰器,json,pickle

    装饰器 定义:本质是函数,装饰其它函数是为了给其添加新功能: 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数即变量: 2.高阶函数 3.嵌套 ...

  7. Django——模板层(template)(模板语法、自定义模板过滤器及标签、模板继承)

    前言:当我们想在页面上给客户端返回一个当前时间,一些初学者可能会很自然的想到用占位符,字符串拼接来达到我们想要的效果,但是这样做会有一个问题,HTML被直接硬编码在 Python代码之中. 1 2 3 ...

  8. Python连接SQLite数据库

    SQLite作为一款轻型数据库,管理工具有很多,比如SQLite Expert Professional,很适合用来存储Python网站,爬虫的相关数据,下面列出基本的增删查改操作 读取操作: con ...

  9. C++流类库(11)

    C++的流类库由几个进行I/O操作的基础类和几个支持特定种类的源和目标的I/O操作的类组成. 流类库的基础类 ios类是isrream类和ostream类的虚基类,用来提供对流进行格式化I/O操作和错 ...

  10. idea配置jetty服务器,通过mvn实现

    今天想试试除了tomcat之外的另一个服务器jetty的使用: 关于项目在tomcat中的启动大概有多种,尤其是在本地环境下,ide关于tomcat的优化做的很好,但是在idea上面部署tomcat总 ...