布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)
比如一个DIV中有三张图片并排,个数不确定的布局。需要鼠标移上去图片从中心放大,只使用float:left布局在放大的时候会导致旁边的元素跟着动,所以需要将float布局转换为absolute绝对定位
1、先使用文档流布局,可以用float这些
2、因为每个图片元素都有offsetLeft和offsetTop,通过遍历获取将offsetLeft和offsetTop赋值给自己的left和top值,最后将元素属性改为绝对定位
for(var i=0;i<aLi.length;i++){
  aLi[i].style.left=aLi[i].offsetLeft+'px';
  aLi[i].style.top=aLi[i].offsetTop+'px';
}
for(var i=0;i<aLi.length;i++){
aLi[i].style.position='absolute'; //需要将设置left、top和设置定位absolute分开写。写在一起将会导致每个元素获取的left和top值相同,因为每个元素都有左浮动,浮动后就添加absolute则后一个li的位置就会左浮动到第一个li的位置
aLi[i].style.position='0'; //如果有margin还需去掉margin。因为在流动布局中的margin在转换为绝对定位后的left和top中已经包含其中了
}

小技巧:多张图片,鼠标悬停放大,会因为z-index层级相同而导致前面的图片被后面的覆盖。可以创建一个zIndex=2,每次悬停的时候赋值给悬停的图片,然后再zIndex++,这样就可以每次悬停的图片在最上层了。z-index最大值为1亿多

布局转换:文档流->绝对定位的更多相关文章

  1. 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

    高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...

  2. css布局与文档流的关系之float(浮动)

    所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display ...

  3. 认识CSS中布局之文档流、浮动、定位以及叠放次序

    前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流 普通 ...

  4. 前端基础-CSS如何布局以及文档流

    一. 网页布局方式 二. 标准流 三. 浮动流 四. 定位流 一. 网页布局方式 1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式, 比如word,nodpad ...

  5. CSS的布局之文档流,与行内/块级元素的延伸

    文档流,即(position:stiatic),是html布局机制的默认状态. 文档流在排列的过程中,块级元素从上到下,行内元素,从左到右. ·块级元素 <div> <h系列> ...

  6. CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别

    1.代码 (1)示例代码1 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=& ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

  9. css盒子模型、文档流、相对与绝对定位、浮动与清除模型

    一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...

随机推荐

  1. RAD,V模型

    介绍: RAD(Rap Application Developmen快速应用开发t)模型是软件开发过程中的一个重要模型,由于模型构图类似字母V,所以又称为软件开发的V模型.它通过开发和测试同时进行的方 ...

  2. SharePoint 2013 重复的管理账户错误:已添加项。字典中的关键字 所添加的关键字

    博客地址:http://blog.csdn.net/FoxDave 今天在管理中心创建新的Web应用程序时,想注册一个新的管理账户,一着急点了两次按钮,结果就出现了这样的错误...怎么说呢,太奇葩 ...

  3. LINQ基础 之 LINQ TO SQL (二)

    配置LINQ TO SQL 首先添加一个Linq to sql文件,以.dbml结尾的文件.无法把表拖拽到.dbml文件中,提示“所选对象使用不支持的数据提供程序” 解决方案 在服务器资源管理器中右键 ...

  4. 打造高质量Android应用:Android开发必知的50个诀窍

    打造高质量Android应用:Android开发必知的50个诀窍

  5. JSON.parse()和JSON.stringify() 的用法区别

    parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...

  6. 嵌入式 -- WINKHUB 边信道攻击 (NAND Glitch)

    0x00 前言 随着物联网IOT的飞速发展,各类嵌入式设备, 路由器安全研究也越来越火. 但因为跟以往纯软件安全研究的要求不同, 这类研究往往需要结合相应的硬件知识. 很多朋友困惑如何开始, 甚至卡在 ...

  7. JSOI地铁换票 (贪心)

    简单贪心即可. ..] of longint; var a,b:arr; i,n,m,sum:longint; procedure sort(var a:arr;l,r: longint); var ...

  8. PHP url重定向

    1.使用header()函数 PHP的 HTTP相关函数种提供了一个 header()函数,首先要清楚,header()函数必须放在php程序的开头部分,而且之前不能有另外的 header() 函数或 ...

  9. 关于IE条件注释(译)

    本文翻译自此篇文章.翻译纯属业余. 许多网站为了确保他们的站点能够在不同的浏览器上有不同的显示效果而使用特征检测,一些传统的网站使用其他技术,诸如在服务器或客户端上使用脚本去检测浏览器类型.在这里我们 ...

  10. 重学STM32---(三) 中断分组和优先级

    看了大半天,终于把原子哥的例程中的中断分组和优先级看懂了,勉勉强强知道了怎么设置中断分组和优先级,,不容易啊.下面就是我收集的资料及我的理解 分组不是很难,就是有一点知道就就全部明白了: // 设置N ...