HTML基础--position 绝对定位 相对定位 锚点链接
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 绝对定位 相对定位 锚点链接的更多相关文章
- 前端HTML 定位position 绝对定位 相对定位
>>>position:absolute;绝对定位 当前元素相对于父级元素位置[该父级元素必须也设定了position,不然会继续往上找祖先元素,直到body为止]的定位 >& ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- div锚点链接跳转
a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...
- jquery 监听所有锚点链接实现平滑移动
jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...
- 微信公众平台回复链接可以直接访问,但不能是锚文字链接<a>标签
最近在学习微信公众平台开发,由于编辑模式和开发模式不可同时开启,在开发模式下如果访客发送关键字过来暂时无法实现关键词自动回复,客服人员先用链接网址直接回复订阅用户,但请注意不能是文字链接,即<a ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- 锚点链接和hash属性
相信大家挺经常见过这样一个效果.有一个很长很长的页面,分成好几部分,目录中一点击,就能定位到页面某个位置. 例如:有这样一个目录,例如你点击一下“HTML”,就会直接跳转到“HTML”的页面位置 这就 ...
- jquer导航锚点链接动画效果和返回顶部代码
$(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...
- html邮件链接和锚点链接
锚点链接: 锚点链接: 标记:<a name="XXX"></a> 取读:<a href="#XXX"></a> ...
随机推荐
- python2.7 使用super关键词 报错 TypeError: must be type, not&n
错误试验代码: class Base(): def meth(self): print "i'm base" class Derived(Base): def meth(self) ...
- Java高新技术 JDK1.5之新特性
Java高新技术 JDK1.5的新特性 知识概要: (1)静态导入 (2)可变参数 (3)增强for循环 (4)基本数据类型的自动拆箱和装箱 静态导入 ...
- c# 接口实用
学习接口,还是记下来吧,不然以后忘记,这个东西也不是常用. interface Interface1 { } 接口中不能有字段, 只能声明方法.
- 学习笔记之08试用div做网页(滨院)-小作业
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- zeroc
ZeroC ICE 是指ZeroC公司的ICE(Internet Communications Engine)中间件平台.对于客户端和服务端程序的开发提供了很大的便利. 目前ICE平台中包括Ice,I ...
- typescript 的 polyfill 学习
我们知道typescript 是ES 超集.这意味着,不仅仅ES 的各种语法特性都会包括,还能保证通过typescript的编译服务可以很方便的转成ES向下兼容的版本,这得意于typescript强大 ...
- win10 uwp 改变鼠标
经常在应用需要修改光标,显示点击.显示输入,但是有些元素不是系统的,那么如何设置鼠标? 本文主要:UWP 设置光标,UWP 移动鼠标 设置光标 需要写一点代码来让程序比较容易看到,什么光标对于什么. ...
- Java设计模式(四)——再谈观察者模式
在本系列的上一篇文章中,我们讨论了JDK对于观察者模式的一套实现.今天我们将要从另一个角度来探索Tomcat中是如何利用观察者模式加载各个组件.不过今天的任务不是解释Tomcat,所以我会单独把重点抽 ...
- 如何搭建ftp的yum源
ftp的yum的搭建步骤 第一步:安装vsftpd程序包(系统已经安装) [root@station40 ~]# rpm -qa |grep vsftpd vsftpd-2.2 ...
- 2年Java开发工作经验面试总结
最近换了个公司,从三月底开始面,面到四月底,面了有快二十家公司.我是一个喜欢总结经验的人,每经过一场面试,我在回来的路上都会仔细回想今天哪些问题可以答的更好,或者哪些问题是自己之前没遇到过的,或者是哪 ...