H5-定位

定位包括:相对定位,绝对定位,固定定位

一、相对定位(position:relative)

  1、相对元素自己原来的位置进行定位;不脱离文档流,元素在文档中占得始终是原来的位置

  2.特性:

    a、不影响元素本身的特性;

    b、不使元素脱离文档流(元素移动之后原始位置会被保留);

    c、如果没有定位偏移量,对元素本身没有任何影响;

    d、提升层级

  3.定位元素位置控制:top/right/bottom/left

    left:正值   向右移动         负值  向左移动

    top:正值  向下移动  负值  向上移动

    right:正值  向左移动  负值  向右移动

    bottom:正值  向上移动  负值  向下移动

    (同时设置left和right,以left为准;同时设置top和bottom,以top为准)

二、绝对定位(position:absolute)

  1、相对元素自己原来的位置进行定位;脱离文档流,元素在文档中不占任何位置

  2、特性:

    a、使元素完全脱离文档流;

    b、使内嵌支持宽高;

    c、块属性标签内容撑开宽度;

    d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移;

    e、相对定位一般都是配合绝对定位元素使用

    f、提升层级

  3、z-index:【number】:定位层级

    a、定位元素默认后者层级高于前者;

    b、建议在兄弟标签之间比较层级;

    c、不在同一父级标签下的标签,比较层级是没有意义的

    (1.改变定位元素(在z方向上)的堆叠顺序,数值大的元素堆叠在数值小的元素上面,设置了z-index值的元素层级会比没有设置的元素层级高。2、如果两个定位元素的z-index值相等,那么按照布局顺序,后布局的元素高于先布局的元素。)

三、固定定位(position:fixed)

  1、与绝对定位的特性基本一致,差别是始终相对整个文档进行定位;(IE6不支持固定定位);

四、定位其他值

  1、position:static;默认值

  2、position:inherit;从父元素继承定位属性的值(不兼容)

五、定位清浮动方法、遮罩滤镜

  1、position:absolute;绝对定位元素子级的浮动可以不用写清浮动方法;

  2、position:fixed;固定定位元素子级的浮动可以不用写清浮动方法(IE6不兼容)

  3、遮罩弹窗(优酷弹窗)

    a、标准 不透明:opacity:0~1;

    b、IE滤镜:filter:alpha(opacity=0~100);

六、定位兼容问题

  1、position:relative;在IE6/7下的父级overflow:hidden;包不住子级的relative;

  2、position:absolute;在IE6下定位元素的父级宽高都为奇数那么在IE6下定位的right和bottom都有1px的偏差。

时间: 2024-08-08 22:44:25

H5-定位的相关文章

利用H5构建地图和获取定位地点

地图与地理定位 定位在大部分项目中都需要实现,如何实现主要有如下的几种方法 H5定位 在HTML5中navigator有很强大的功能,其中就有定位的方法 navigator.geolocation.getCurrentPosition(function showPosition(position){ lat=position.coords.latitude; lon=position.coords.longitude; console.log(lat,lon) },function(err){

混合元素app的H5元素定位

问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原生控件进行元素定位,而Web网页是单独的B/S架构,两者的运行环境不同因此需要进行上下文(context)切换,然后对H5页面元素进行定位操作. context 简介 Context的中文翻译为:语境; 上下文; 背景; 环境,在开发中我们经常说"上下文",那么这个"上下文&qu

Appium+python自动化(十一)- 元素定位秘籍助你打通任督二脉 - 下卷(超详解)

简介 宏哥看你骨骼惊奇,印堂发亮,必是练武之奇才! 按照上一篇的节目预告,这一篇还是继续由宏哥给小伙伴们分享元素定位,是不是按照上一篇的秘籍修炼,是不是感觉到头顶盖好像被掀开,内气从头上冒出去,顿时觉得整个身体都融化了,而且身轻如燕啊!而且控制不住手,想要动手操作一番呢?那还在等什么呢,和宏哥一起练起来吧!!! 1. List定位 List故名思义就是一个列表,在python里面也有list这一个说法,如果你不是很理解什么是list,这里暂且理解为一个数组或者说一个集合.首先一个list是一个集

工作需求——JQ小效果分享下

一.文字索引效果展示: html布局代码 <ul class="n_areaList"> <li> <h5>当前选择区域</h5> <p>北京市</p> </li> <li> <h5>定位区域</h5> <p>北京市</p> </li> <li> <h5>A</h5> <a href=&qu

01:CSS基础

一:选择器☆☆ 元素选择器 p { color: #ff0000; } 派生选择器:比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器,也就是说li中的strong:li strong { font-style: italic; font-weight: normal; } id 选择器,id选择器可以跟派生一起使用#red {color:red;} #green {color:green;} <p id="red">这个段

plus.webview.create( url, id, styles, extras )参数及说明

plus.webview.create( "xxx.html", //url:String类型,可选,新窗口加载的HTML页面地址.新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址. "xxx", //id:String类型,可选,新窗口的标识.窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口.如果传入无效的字符串则使用url参数作为We

百度地图和solr展示资源和附近等功能的实现 四

这章主要是定位功能,首先谈谈H5的定位,开始大部分的代码都是这个上面差不多https://www.cnblogs.com/lijuntao/p/6439596.html 但是第一步定位一直走不通, ie浏览器可以获取到定位的位置外,其他浏览器基本获取不到位置,https试过好像也不行,最后一朋友在国外试代码,结果可用,可怕啊,为啥不用百度地图自己的定位,可能是我技术不到位把,怎么也定位不准,也想过个种办法,最后还是放弃了,才用的H5定位, 开始用的ie测试的,效果蛮好,测试工程说,其他浏览器都不

获取定位,苹果IOS10以上不支持h5的geolocation获取不到地理位置信息解决办法

今天开发应用,获取地理位置,最先采用H5的Geolocation的方法来获取地理位置,经过测试发现安卓的机子可以,但是IOS的就是不行,一查资料才知道:10.0苹果版本需要协议为https的才可以获取到地理定位. 而后为了解决此问题,改用百度MAP来获取,具体步骤和代码如下: 1. 打开http://lbsyun.baidu.com/百度地图开放平台 2. 开发-->javascriptApi,点击获取密钥,注册获取密钥 3. 最后上完整代码 <!DOCTYPE html> <ht

基于h5+ajax实现的手机定位

因朋友需要,之前看了下关于h5的手机定位,目前写了个demo在这里贴出来,感兴趣的朋友可以看一下. 目前的版本只是demo,仍有几个问题需要完善一下,问题如下: 1,如何将经纬度等数据发送到被定位人看不到的页面上. 2,如何绕过或或强制让打开链接的人允许使用定位(弹窗). 3,目前或取经纬度后,要自行用谷歌地球去分析用户位置(通过卫星地图定位并显示),如何简化这一部分,让被定位者的经纬度自动生成地图图片并一起导入到其他页面(总之不能让被定位者察觉自己被定位的这一事实). <!DOCTYPE HT

h5 获取定位

h5 获取地理位 -模糊 <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script> <script> var city = remote_ip_info['city']; alert(city); </script> h5 获取地理位 -谷歌精准地位 需要客户允许定位 <!doctype html> <html