关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)   作者:王可利(Star·星星)

HTML中

相对定位:position:relative;

绝对定位:position:absolut;

1.相对定位(div与div之间的关系)

       body 标签其实就是一个大的盒子,在body里面设置 两个盒子div1 和 div2 ,而且两个盒子都给了它一个相对定位:position:relative;,那么div2 就会相对于 div1 排版,排在div1的下面,如果div2 给了一个浮动 float:left,那么div2 就会 和 div1并排。

     

      如果在上面的基础上,div1 和 div2 的里面都 添加一个 子盒子 ,div1 里面有一个 div3,div2里面有一个 div4,相对应地 div3 和 div4 也给了 相对定位的话 ,div3 就会相对 div1 这个父类来 相对定位,div4 就会相对 div2 这个父类来 相对定位。

      

      如果div1里面 同时拥有 一个 div3 和 一个 div4 的话,div3 和 div4 就会在 div1这个父类里面进行相对定位,与 div2没有直接的影响。。

     

2.绝对定位(div与div之间的关系)

     绝对定位需要记住的口诀是:

     1.绝对定位会找到与自己最近的父类来定位,不是自己的父类与自己无关。

     2.绝对定位找到了自己的父类之后,要看这个父类是否进行了相对定位,没有相对定位的话就不会找这个父类来定位。

     总结:绝对定位会寻找一个 距离自己最近的 父类 ,并且这个父类进行了 相对定位,那么这个盒子就会找这个已经有了相对定位的父类来定位。

   

 例子如下:

        body标签里面  定义盒子 div1,div1 包含 div2 ,div2 包含 div3 。

        情况1:div1、div2 盒子 都设置了 相对定位 ,div3 设置了 绝对定位。

        分析:body、div1、div2 都是 div3 的父类,而距离div3最近的父类是div2,所以div3 就会在 div2 里面进行绝对定位。。

        

        情况2:div1设置了 相对定位 ,div2没有设置相对定位,div3 设置了绝对定位。

        分析:body、div1、div2 都是 div3 的父类,距离div3最近的父类是div2,但是div2 没有设置 相对定位,所以就继续找有相对定位的父类,div1 是 div3 的父类 ,进行了相对定位里面的父类 最近的那一个,那么 就会在 div1 里面进行绝对定位。。

       

这个是本人自己在学习当中总结的一些网页相关的排版定位技巧,希望可以对大家有帮助。。有什么不足,由大家来补充。谢谢。。

时间: 2024-10-19 20:05:36

关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)的相关文章

利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)

利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)   作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $("").css()   这里css是小写的,用 HBuilder 编写补全是大写的..这里要注意 主要使用的方法:jQuery 隐藏 / 显示    jQuery 淡出淡入 需要注意的知识点: 效果的样式: 代码如下:(亲们 自己展开拉~) 1 <!DOCTYPE html> 2 <

学习Hadoop过程中遇到的困难

1:Shuffle Error: Exceeded MAX_FAILED_UNIQUE_FETCHES; bailing-out 这是reduce预处理阶段shuffle时获取已完成的map的输出失败次数超过上限造成的,上限默认为5.引起此问题的方式可能会有很多种,比如网络连接不正常,连接超时,带宽较差以及端口阻塞等,通常框架内网络情况较好是不会出现此错误的. 2:Too many fetch-failures Answer: 出现这个问题主要是结点间的连通不够全面. 1) 检查 ./etc/h

当学习前端过程中心态发生了变化

学习前端的过程中,我们会遇到各式各样的问题.有的是粗心大意,有的是知识理解的偏差,有的只是自己疲惫所致.这些问题一担越陷越深,都会人让自己的心态产生波动,我们只要想出各种方法来解决问题,才能让自己的心态恢复稳定. 前端相比后台来说,是最直接面对用户群的岗位,用户在访问网站时最直观的就是前端页面.网站出现任何的问题用户所抱怨也是最直观的东西.这就对前端要求提出了更高的要求.我们的职责就是精准的还原出设计图.可以说是经常会和1px的像素较真的工作,偏差也只能在几个像素值之间.这样较真的工作往往都会让

个人学习C++过程中对const的总结:初始化系列之用字面值常量与其他类型的值初始化的区别(一)

const这个系列博大精深,在学习过程一点一点积累记录.但是由于随笔在发布之后不能修改,有了新的想法之后不能再在原随笔上修改,只好用一个个系列来慢慢积累. 哈哈,在发布之后发现是可以继续编辑的,好吧,不管了,这种方式挺好. 正文: 昨晚接触到一个算法题目,回文字符串,在网上找了某段代码,但是发现有点问题,原形大概如下: .... const int len=mystr.size(); //mystr是string的一个实例,其实我挺奇怪这里为什么用int而不是string::size_type或

学习Android过程中遇到的问题及解决方法——电话监听

也许有时你会有这样一个需求:通电话时有一个重要的事需要记下来或者和一个陌生人特别是大骗子通话时,这是就想如果能把通话录下来就方便多了.(这才是我写这个代码的目的!!!) 在此过程中,犯了一个很大的错误.对电话状态还不熟悉就开始编程,使得我就算编写正确也出现各种bug. 先将代码列出来,供大家参考,然后解释错误和相关知识. activity_main.xml: 1 <?xml version="1.0" encoding="utf-8"?> 2 <L

(转)理解YOLOv2训练过程中输出参数含义

最近有人问起在YOLOv2训练过程中输出在终端的不同的参数分别代表什么含义,如何去理解这些参数?本篇文章中我将尝试着去回答这个有趣的问题. 刚好现在我正在训练一个YOLOv2模型,拿这个真实的例子来讨论再合适不过了,下边是我训练中使用的 .cfg 文件(你可以在cfg文件夹下找到它): 以下是训练过程中终端输出的一个截图: 以上截图显示了所有训练图片的一个批次(batch),批次大小的划分根据我们在 .cfg 文件中设置的subdivisions参数.在我使用的 .cfg 文件中 batch =

学习javascript过程中的心得体会

在看到这个编程练习的时候,我的第一反应是JS居然强大到可以代替JSP了.但仔细想想,其实这只是表面的删除,增加,并没有对数据库的数据产生任何影响,所以,JSP还是王道啊!233333 练习过程中遇到的问题,知识点总结 1.由于很多时候JS是写在head前面的,调用一些body里的元素ID,而此时body尚未载入,就会报错,找不到该元素,所以写成window.onload=function() {//调用一些元素..}写在head的前面,这样再调用就不会出错了

学习JSP过程中的入门知识

俗话说的好,“万事开头难”,每每学一种新东西,起初的时候总是让人十分恶心.当然本人在学习JSP时也是如此,没有一条清晰的主线是很迷茫的.下面我给大家分享一点笔记,希望对初学者能有一点帮助. 首先我们来看一下静态网页的执行过程: 1.用户首先在浏览器的地址中键入要访问的网页地址(即:URL uniform resourse locator,统一资源定位符)并回车触发这个请求. 2.浏览器将请求发送到指定的web服务器上. 3.web服务器接收这些请求并根据.html的后缀名判断请求是HTML文件.

记录在学习ML过程中,在MATLAB中集成LibSVM时遇到的问题

前几天写了一下自己对SVM中关键的距离问题的理解,后面会继续记录自己对该模型其他问题的理解,今天想试试SVM在"西瓜书"那个"阿尔法3.0"数据集上的效果.于是查到了"湾湾"教授林智仁先生大牛等写的一个开源包LibSVM,并且该library可以与很多平台兼容,有很多语言版本,支持java .C++.C .MATLAB等,我们可以在林教授主页上下载.LibSVM地址:http://www.csie.ntu.edu.tw/~cjlin/libsvm