html网页定位,HTML_定位网页元素(示例代码)

一.position属性

意指:盒子的位置。

四个属性:

1.static:默认值,没有定位,元素按照标准文档流进行布局。

2.relative:相对定位,使用相对定位的盒子位置以标准文档流进行的排办方式为基础,然后使盒子相对于他原本的位置偏移指定的距离。相对定位的盒子仍然在标准文档流中,其后的盒子仍以标准文档流当是对待它。

3.absolute:绝对定位,盒子的位置以包含他的盒子为基准进行偏移。绝对定位的盒子从标准文档流中脱离。这意味着他们对其后的其他盒子的定位没有影响,对于其他的盒子来说就好像这个盒子不存在一样。

4.fixed:固定定位,他和绝对定位类似,只是以浏览器窗口为基础进行定位,也就是说当拖动浏览器窗口的滚动条时,依然保持对象位置不变。

……

第一个盒子
第二个盒子
第三个盒子

﹉﹉

div{

margin:10px;

padding:5px;

line-height:25px;

}

#father{

border:1px solid;

padding:0px;

}

#fir{

nackground-color:#F2BB6F;

border:1px dashed;

}

……

#设置相对定位元素的规律#

1)设置相对定位的盒子会相对他原来的位置,通过指定的位移,到达新的位置。

2)设置相对定位的盒子扔在标准文档中,他对父级盒子和相近的盒子都没有任何影响。

3)设置相对定位的盒子原来的位置会被保留下来。

#绝对定位#

1)使用绝对定位的元素以他最近的一个“已定位”的“祖先”元素为基准进行偏移。如果没有已定位的祖先元素,那么以浏览器为基准进行定位。

2)绝对定位的元素从标准文档流中拖影,这意味着他们√其他元素的定位不会造成影响。

^O^相对定位的特性:

1)相对定位自己的初始位置来定位。

2)元素位置发生偏移后,他的原来位置会被保留下来。

3)层次提高,可以把标准文档流的元素及浮动元素盖在下面。

使用场景

1)相对定位一般情况很少单独用,都是配合绝对定位使用,为绝对定位创造父级而不是位置偏移。

^O^绝对定位的特性:

1)绝对定位相对他的定位父级的位置来定位的。

2)元素位置发生偏移后,他原来的位置不会被保留下来。

3)层次提高,可以把标准文档流中的元素及浮动元素盖在下面。

4)设置绝对定位的元素脱离文档流。

使用场景

1)一般情况下,绝对定位用在下拉菜单,焦点图轮播,跳出数字泡,特别等场景

二.z-index属性

用来解决覆盖的元素他们上下位置

z-index:(数字);

两个属性:

1.opacity:x    值为0~1

2.filter:alpha  值为0~100

由于浏览器的兼容,一般情况两个同时使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/498536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人类“换头术”现在就是一场炒作 但医学界不会放弃研究

来源:腾讯科技 概要:和换头有关的实验可能都会继续进行下去。只是从技术和伦理上讲,什么时候才是适合做人类换头术的时机,这就很难说了。 两年前,意大利神经外科医生生塞尔吉奥卡纳维罗(Sergio Canavero&am…

我的世界html导入整合包教程,《我的世界手机版》如何制作一个整合包教程攻略...

今天当乐网小编要给大家分享的是一个我的世界手机版整合包的制作教程:我的世界手机版中,很多玩家可能还不会使用单独的材质包以及存档等等,这个时候就会有比较有爱的玩家制作出整合包分享出来,整合包直接安装好久可以…

Facebook 应用机器学习团队专访:人工智能在 Facebook 中的应用

来源:AI科技大本营 作者:Steven Levy 是 Backchannel 的一名编辑。 概要:当下,应用机器学习团队(Applied Machine Learning Group)对 Facebook 的影响体现在方方面面,涉及阅读、交流方法和理解方…

转专业学计算机难嘛,大学转专业容易吗 转专业需要什么条件

大学转专业容易吗 转专业需要什么条件2018-07-23 16:45:42文/李男每年都有很多学生,因为不了解自己所填报的专业,导致上大学后想转专业。那么,大学转专业容易吗?下面小编整理了一些相关信息,供大家参考!大学…

远控时其他用户登录到这台计算机,如何远程控制另一台电脑 远程控制另一台电脑方法【详解】...

如何远程控制另一台电脑?如果是2003的系统或XP的系统的话就用windows的远程桌面功能!右击我的电脑,属性,远程,远程桌面里的框里打勾,然后选择选择远程用户管理员的话不用选,管理员已经有权限了。点确定即可。下面&…

AI技术的天花板:图灵机无法建立“自我”意识的概念

来源:财经杂志 概要:AI的实现时必须依靠计算机,但基于图灵机的AI在理论上无法超越人类智能,至少不会基于这一代的计算机技术和理论。 人工智能(AI)的基本假设是“认知即计算”。但目前对认知本质的理解不同…

创建ftp服务器后html,搭建ftp服务器需要用到固定IP吗

弹性云服务器 ECS弹性云服务器(Elastic Cloud Server)是一种可随时自助获取、可弹性伸缩的云服务器,帮助用户打造可靠、安全、灵活、高效的应用环境,确保服务持久稳定运行,提升运维效率三年低至5折,多种配置可选了解详情使用VNC V…

源码资本张宏江:只有算法和技术,那你一定挣不到钱

来源:拓扑社 概要::在人工智能这一拨的技术浪潮的公司,互联网不一样的地方就在于互联网基本上是商业模式驱动,搜索以前没有,to C这块是赢家通吃。这块做成熟以后进入互联网。 张宏江认为,一家传统公司要想用…

为什么计算机专业被称为宇宙机,量子计算机为何被称为宇宙中最强大的计算机...

以我们目前的技术,量子计算似乎有可能建立地球上最强大的量子计算机。这台超级计算机由干涉仪提供动力,干涉仪可以检测液体中的振动以及从一个层次移动到另一个层次的粒子。对产生量子涨落的量子位的测量存储在一个称为“球体”的量子数据存储器中。此数…

说明:最新谷歌AI智商不超过6岁研究来自中国科学院而非美国康内尔大学

最近cnBeta等多家网站报道: “据HotHardware报道称,来自美国康奈尔大学一组研究人员对各大科技公司的人工智能型语音助手进行了横向比较。研究人员发现,谷歌助手拥有目前语音助手类中最高的平均智商,IQ值约为47.28,水准…

大学计算机在线答题,大学计算机基础网上考试答题卷理论部分(含答案)

A、129B、-1C、-127D、127正确答案: C7、显示卡中的_________用于存储显示屏上所有像素的颜色信息。A、显示控制电路B、显示存储器C、接口电路D、寄存器正确答案: B8、I/O接口指的是计算机中用于连接I/O设备的各种插头/插座,以及相应的通信规程和电气特性。在目前的…

oracle即时客户端(Instant Client)安装与配置

之前的文章记录了oracle客户端和服务端的下载与安装,内容参见: 在Windows中安装Oracle_windows安装oracle 如果不想安装oracle客户端(或者是电脑因为某些原因无法安装oracle客户端),还想能够连接oracle远程服务&#…

无人零售场景、技术全解读:伪需求or真风口?

来源:智东西 概要:无人零售是不是伪需求,相关技术成熟度怎么样,行业竞争的本质是在拼什么。 无人零售,作为新零售的热点概念,采用计算机视觉、生物识别、智能算法等技术,覆盖机器人制造、支付设…

用计算机进行频谱分析时,实验四-利用FFT对信号进行频谱分析1112

实验四 利用DFT 对信号进行频谱分析一、目的要求(1) 进一步加深对线性卷积的理解和分析能力;(2) 通过编程,上机调试程序,进一步增强使用计算机解决问题的能力; (3) 掌握线性卷积与循环卷积软件实现的方法,并验证二者之…

人类的下一代计算平台——科技大发展前景下的新思考

来源:亿欧 概要:所谓的最大的下一代计算平台,在可见的未来,不会是一个如同手机般的单一平台,而是一种生态化的泛计算平台。 在可见的范围(5-10年)内,计算平台发展方向应该是“交互设…

一台计算机怎么弄2个登录桌面,一台主机两个显示器 教您电脑两个显示器怎么设置 - 云骑士一键重装系统...

有用户反馈称在前台收银,可能会用一台显示器别人可以看到,而一台显示器就收银员操作是观看,现在的电脑显卡都很强大,有些用户觉得很好玩,想要这样操作,那么电脑两个显示器怎么设置?下面给大家讲解设置电脑…

智能生态系统的产业架构与趋势研究

来源:本翼资本CapitalWings 概要:信息生态链产业自下而上可以分为:感知层—网络层—平台层—应用层;而在智能革命下,生态链的网络层和平台层会更加扁平化、融合化,本文提出了“云、管、端”一体化的智能生…

收到计算机工程与应用的退修通知,《计算机工程与应用》退修意见

初审 编辑部 2014-12-05 2014-12-03待交审稿费 编辑部 2014-12-03 2014-12-18 2014-12-05编委审稿 编委 2014-12-05 2014-12-25 2014-12-19外审 …

Google 顶级论文:机器学习系统,隐藏多少技术债?

来源: 全球人工智能 概要:随着机器学习(ML)社群持续积累了几年对于活跃系统(live systems)的经验,一种让人不舒服的趋势广泛地浮出水面:研发和部署机器学习系统相对来说是既快速又便…

html5 测研制,360发布国内首个HTML5实验室 4大特性抢先测

当前,主流浏览器厂商都在发力HTML5技术,各自比拼最新HTML5性能。但是,相比于各种跑分成绩,普通用户更关心浏览器实际支持了哪些HTML5特性,给我们带来多少方便。为此,360极速浏览器日前推出国内首个HTML5实验室&#xf…