html与css定位技术

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>

 

效果如下: 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值