html与css定位技术

最新推荐文章于 2022-10-25 11:34:55 发布

原创最新推荐文章于 2022-10-25 11:34:55 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#定位技术 #position：relative与absolute与fix

html与css定位技术

一、position:absolute(绝对定位)

html代码：

<div></div>

css代码：

{

position:absolute;

left:100px;/*左边线距离左边框100px*/
top:100px;/*上边线距离上边框100px*/

}

注意：

left也可以换成right,表示右边线距离右边浏览器边框多少距离

top也可以换成bottom,表示下边线距离底部边框多少距离，一般不设置bottom,都设置top.

left与right只能出现一个
bottom与top也只能出现一个

<body>有一个自带的margin是8px，通常在编程的时候，会将这个margin去掉，会这样写：

*{
margin:0;

padding:0;

}
只有当把margin设置为0的时候，才能使body中的盒子贴着浏览器的边框显示。

性质：

1.当一个元素使用绝对定位的时候，它就会脱离原来的层，跑到上一层。
2.相对于最近的有定位的父级进行定位，如果没有这样的有定位的父级，那么相对于文档进行定位。

举例如下：

html代码为：
<div class="demo"></div>
<div class="box"></div>

css代码为：
*{
   margin:0;
   padding:0;
}

.demo{
   position:absolute;
   width:100px;
height:100px;/*设置宽高都是对盒子的内容规定大小*/
background-color:red;/*设置的背景颜色对content+padding都起了作用*/
opacity:0.5;/*透明度为：0.5*/
}.box{
   width:150px;
   height:150px;
   background-color:green;
}

显示效果如下：

虽然是div，但是绿色方块和红色的方块在同一个地方显示，有重合，明显的层叠效果，原因是demo这个盒子设置了绝对定位，它就会脱离原来的层，跑到上一层，那么原本在下面显示的绿色盒子就会跑到原来demo这个红色盒子的位置上，给demo盒子加了透明度，可以更清除得看到层叠显示。

二、position：relative（相对定位）

注意：和绝对定位的作用差不多，都可以设置left,right,top,bottom,来给盒子定位

相对定位是相对于原来自己出生的位置进行定位。

但是，不同点在于：

relative定位是保留原来的位置，同时又跑到了另一个层上去。如果给一个盒子“demo”相对定位了，那么写在其后面的盒子就不会移动到原来“demo”这个盒子的位置上去，原因是原来demo这个盒子的位置任然被占用着。但是真正的demo已经跑到了另一层上去了。

举例如下：

html代码：

   <div class="demo"></div>
<div class="box"></div>

css代码：

*{
    margin:0;
    padding:0;
}
.demo{
position:relative;
width:100px;
height:100px;
background-color:red;
opacity:0.5;
}
.box{
width:150px;
height:150px;
background-color:green;
}

显示效果如下：

如果在css代码里的.demo{}里面加上left:100px;top:100px;即给这个盒子进行一个定位，那么会出现下面的结果：

补充：

position:relative;
right:10px;*//*如果用relative,就是自己现在的右边框相对于之前的自己的右边框距离为10px*/

举例如下：

html:

<div class="demo">
<div class="box"></div>
</div>

css:

*{
   padding:0;
   margin:0;
}
.demo{
   width:200px;
   height:200px;
   position:relative;/*相对于自己原来出生的位置定位*/
   top:200px;
   left:200px;
   background-color:green;
}
.box{
   width:100px;
   height:100px;
   position:relative;/*自己原来出生的位置在绿色方块的左上角，相对与自己原来出生的位置定位*/
   background-color:red;
   bottom:20px;
}

效果如下：可以看到红色方块上移了20px,因为它设置了bottom:20px;是相对于自己原来出生的位置的下底边20px

三、position:fixed（固定定位）

可以让该定位元素定位到可视页面的某一个固定位置，不会随着滚动条的滚动而移动。

举例如下：

居中,不随滚动条滚动而移动

html代码：

<div></div>

<br>//此处有1000个<br>,为了生成滚动条

css代码：

div{
position:fixed;
left:50%;
top:50%;//这两句只是将该方块的左顶点挪到了浏览器页面的正中间。
margin-left:-50px;//将该方块向左移动50px(移动的像素多少是根据所要居中盒子的大小来决定的)
margin-top:-50px;//将该方块向上移动50px
width:100px;
height:100px;
background-color:red;
z-index: 1;//正常的层是0,数字越大，层越靠近自己，也就是越先看到它。
border-radius:50%;//会变成正圆
}

显示效果如下：

这个圆不会随着滚动条的滚动而移动，而且在视窗的正中央定位

补充：如下设置一个方块，定位为fixed,他是相对于浏览器的可视区窗口进行的定位,设置了bottom:20px以后，相对于浏览器的最低端的距离是20px

<div style="width:100px;height:100px;background-color:red;position:fixed;bottom:100px"></div>

html与css定位技术

html与css定位技术

一、position:absolute(绝对定位)

注意：

性质：

1.当一个元素使用绝对定位的时候，它就会脱离原来的层，跑到上一层。 2.相对于最近的有定位的父级进行定位，如果没有这样的有定位的父级，那么相对于文 档进行定位。

举例如下：

显示效果如下：

二、position：relative（相对定位）

注意：和绝对定位的作用差不多，都可以设置left,right,top,bottom,来给盒子定位

相对定位是相对于原来自己出生的位置进行定位。

但是，不同点在于：

举例如下：

显示效果如下：

举例如下：

效果如下：可以看到红色方块上移了20px,因为它设置了bottom:20px;是相对于自己原来出生的位置的下底边20px

三、position:fixed（固定定位）

举例如下：

居中,不随滚动条滚动而移动

显示效果如下：

这个圆不会随着滚动条的滚动而移动，而且在视窗的正中央定位

补充：如下设置一个方块，定位为fixed,他是相对于浏览器的可视区窗口进行的定位,设置了bottom:20px以后，相对于浏览器的最低端的距离是20px

效果如下：

1.当一个元素使用绝对定位的时候，它就会脱离原来的层，跑到上一层。
2.相对于最近的有定位的父级进行定位，如果没有这样的有定位的父级，那么相对于文档进行定位。