动力节点旗下在线教育品牌  |  咨询热线:400-8080-105 学Java全栈,上蛙课网
首页 > 文章

CSS的绝对定位和相对定位的概念及使用情况

08-12 16:16 163浏览
举报 T字号
  • 大字
  • 中字
  • 小字

CSS是前端技术中的一种,是合格的java程序员必备技能之一。熟练掌握在html中使用CSS的不同方式以及各种常用的显示效果,是java零基础的新手在短期内需要掌握的技能。为了更好的熟练运用CSS,在学习前端CSS技术的开始,先来对CSS绝对定位和相对定位的相关知识有一个了解和认识。

CSS中绝对定位和相对定位的概念,是刚刚接触java不久的新手小白朋友们学习CSS技术首先要知道的知识点。

绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,使用left,right,top,bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的,则依据body对象左上角作为参考进行定位。注明:绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持)。

相对定位(relative)的概念是:对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
绝对定位和相对定位的使用情况如下:

第一种层级关系为:

<div ———————————position:relative; 不是最近的祖先定位元素,不是参照物

<div————————————没有设置为定位元素,不是参照物

<div————————————position:relative 参照物

<div box1

<div box2 ——–—  position:absolute; top:50px; left:120px;

<div box3

第二种层级关系为:

<div —————————position:relative;最近的祖先定位元素,参照物

<div——————————没有设置为定位元素,不是参照物

<div——————————没有设置为定位元素,不是参照物

<div box1

<div box2 ——–————position:absolute; top:50px; left:120px;

<div box3

 

<style>    

#div1 { width:600px ; height: 600px; margin-left:10px; margin-top:10px; border:2px solid red}

#div2 { width:500px ; height: 500px;margin-left:10px; margin-top:10px; border:2px solid blue}

#div3 { width:400px ; height: 450px; margin-left:10px; margin-top:10px; border:2px solid yellow}

 

#box1{ width:200px; height:200px; border:#000000; background-color:#99FF66;}

#box2{ width:160px; height:160px; border:#0000CC solid 2px; background-color:#990066; position:absolute; top:150px ; left:270px;}

#box3{ width:200px; height:200px; border:#000000 ; background-color:#333333;}

</style>

<div id="div1">

    <div id="div2">

    <div id="div3">

             <div id="box1">box1</div>

 <div id="box2">box2</div>

 <div id="box3">box3</div>  

</div>

</div>

</div>

如果想为元素设置层模型中的绝对定位,需要设置position:absolute;,这条语句的作用将元素从文档流中拖出来,将不占用原来元素的空间,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位。如果不存在就逐级向上排查,直到相对于body元素,即相对于浏览器窗口。

如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置,然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。比如我们想要让一个div元素相对当前位置左移100px,上移100px

以上是CSS绝对定位和相对定位概念及使用情况的介绍,想要快速入门CSS的朋友们,可以在空余时间学习更多的CSS视频课程CSS的定位是在网页制作中比较常用的属性,也是很重要的知识点,了解各个定位的作用以及层级关系对以后的页面布局至关重要,希望大家都可以掌握CSS技能。

 

0人推荐
共同学习,写下你的评论
0条评论
代码小兵1089
程序员代码小兵1089

6篇文章贡献22944字

作者相关文章更多>

推荐相关文章更多>

DOM渲染的详细过程

QCode09-04 14:38

CSS水平和垂直居中技巧大梳理

Code大师09-04 14:50

mui的input框在IOS系统下无法聚焦或点击多次才能聚焦

不写代码你养我啊08-23 11:14

推荐的-视.频播放器以及在线客服

不写代码你养我啊09-17 18:02

谈谈java多线程的三大特性

要学习了06-18 18:13

发评论

举报

0/150

取消