网页布局中position定位讲解

2022-12-31 09:46:18来源：网络转载作者：匿名 阅读量：126 字体：大 中 小

Adobe Dreamweaver CS5

01、相对定位(relative)是非常容易掌握的概念，通俗一点就是正常的块级定位，只不过块级的位置是通过top、left、right、bottom属性来进行规定。不过，原来所占用的空间并没有消失。首先先来正常的定位，如下图。

网页布局中position定位讲解

02、然后在正常定位的里面，利用position：relative来相对定位，relative属性值的父元素就是上图块元素，如下图。

03、绝对定位(absolute)第一个特征就是会从文档流中脱离，不占据任何空间。它的定位属性也是跟相对定位一样，通过top、left、right、bottom来进行规定，如下图。

04、一个父元素里面包含多几个绝对定位，如果绝对定位元素重叠在一起，如下图，A和B重叠在一起了，需要A在前面B在后面，我们只需要在A里面添加z-index来控制。

，我们可以利用z-index来控制哪个在前，哪个在后，如下图。

05、但是一定要切忌，如若属性值为absolute，那么一定要配合relative为父元素的块来使用。如果没有配合，如下图。会直接以body为父元素。

06、静态定位(static)一般不使用，它的属性值定义为没有定位，元素出现在正常的流中。忽略top, bottom, left, right，如下图。

07、固定定位（fixed）属性值的定义为浏览器窗口进行定位。通俗一点就是父元素为body，通过top, bottom, left, right来控制位置。如下图定位在relative里面，然而并没有效果。

特别提示

注意：属性值不同所产生的效果不同哦

免责声明：

本文《网页布局中position定位讲解》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • 页游私服介绍

    页游私服介绍

    01、近段时间在网络中流行玩页游私服，页游私服提供了更多的奖励，让玩家玩得更加过瘾，升级更块、经验更高、攻击更变态，各种的属性都比传统的页游要高上很多。 我就拿贪玩蓝月给大家举个例子吧02、首先进入到...

    阅读: 858

  • 为什么中国做不出像旅行青蛙这样的游戏

    为什么中国做不出像旅行青蛙这样的游戏

    01、旅行青蛙的主要玩法是什么，总体来说是一款很轻松的游戏，玩家长时间都在挂机，并不用消耗过多的时间来玩游戏，而且很贴近人们的生活。 02、旅行青蛙火热的原因是因为游戏的设定，很多女性都爱玩，就像是...

    阅读: 808

  • dnf被制裁怎么缩短时间

    dnf被制裁怎么缩短时间

    01、首先手机关注微信公众号“腾讯游戏安全游戏中心” 02、进入左下角的绑定管理。 03、将自己被制裁的号加入绑定然后回到公众号选择自助服务。 04、然后选择处罚查询，就可以看到自己的制裁情况，...

    阅读: 726

  • 罪恶都市怎么游泳秘籍

    罪恶都市怎么游泳秘籍

    电脑01、打开桌面上侠盗飞车罪恶都市客户端 02、登录游戏后，输入秘籍：LOADS OF LITTLE THINGS（两遍） 03、然后再输入秘籍：GET THE REFAST ，得到一辆汽车 ...

    阅读: 894

  • 小米电视怎么看电视直播

    小米电视怎么看电视直播

    01、在搜狗搜索中搜索影视快搜tv版下载。 02、下载之后，将U盘插入电脑主机，将影视快搜的安装包拷贝下来。 03、把U盘插到小米电视的USB接口上，随后电视跳出一个页面，点击应用。 04、点击...

    阅读: 929

  • u盘格式化后的文件能找回吗

    u盘格式化后的文件能找回吗

    电脑，U盘 01、首先要说明的一点是u盘里面的格式化了的文件，只要没有被新文件覆盖，都是可以找回来的。 02、找回的步骤第一步就是，把u盘插到电脑上面，等待电脑识别u盘，识别后进行下一步 03、...

    阅读: 739

  • Excel表格里垂直滚动条怎么调长？

    Excel表格里垂直滚动条怎么调长？

    使用软件：excel01、在桌面上双击excel的快捷图标，打开excel这款软件，进入到excel的操作界面如图所示： 02、打开excel之后按下Ctrl+O键在弹出的对话框内我们找到表格文件，...

    阅读: 744

  • Word2013中打印快捷键一览表设置

    Word2013中打印快捷键一览表设置

    电脑一部、word 2013 01、1.在电脑桌面上找到Word2013 ，并点击鼠标右键，然后鼠标左键点击“打开”。 02、2.打开了Word2013 ，就会出现如下界面，然后选择“空白...

    阅读: 711

  • 怎样修改iTunes备份目录路径释放C盘空间

    怎样修改iTunes备份目录路径释放C盘空间

    电脑01、首先需要删除你的原始备份文件夹，在C盘依次打开C:UsersLS（每人不一样，为你的用户名）AppDataRoamingApple Computer，然后删除MobileSync文件夹 0...

    阅读: 680

  • 怎么设置一台电脑两台显示器两个屏幕

    怎么设置一台电脑两台显示器两个屏幕

    笔记本电脑 VGA或者HDMI数据线01、电脑可以分屏对于很多编程学习爱好者来说有着不少的妙用，可以左边的屏幕看视频学习，右边的实例操作。 02、我们首先需要知道我们的笔记本电脑的外接数据线的...

    阅读: 670

更多排行榜

热门文章

最近更新