欢迎光临邛崃市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

我理解的css3中:position中的relative和absolute

时间:2019-09-19   来源:邛崃市网站建设

在网站开发过程中,我们常常要用到相对定位和**定位。

而作为一个前端开发小白来说。对于这两个的理解往往是很不容易的。以下是我在使用中的感觉。

手先我们来看一段初始代码

  <style>
        
        .box1{width:600px; height:400px; background:#000; }
        .box2{width:200px; height:150px; background: red; }
        
    </style>
    
    
<div class="box1"> 
    <div class="box2"></div>
</div>

QQ截图20190919112455.jpg

我们可以得到如图所示的效果。这个时候我们也可以通过调整margin或者padding来调用红色区域在黑色区域的不同位置。

但是在网站建设过程中,我们开发前端的人员往往觉得这样是不够的。因为我们在box1当中,可能需要添加文字或者图片。比如说:

<div class="box1"> 
<img src="/static/loading.gif"  data-src=""1.jpg"" width="600px" height="400px;">
<div class="box2"></div>
</div>


2.jpg

这个时候我们发现,红色区域已经脱离了BOX1了


如何调整BOX2的位置呢?这个时候就需要用到:position了。

.box1{width:600px; height:400px; background:#000; position:relative; }
        .box2{width:200px; height:150px; background: red; position: absolute; top: 10px; LEFT:10PX;}

我们将外部的大BOX1设置一个**定位,再将内部的小BOX2设置为相对定位,并添加相对定位的位置,如TOP,LEFT,就可以了。

image.png

本文标签:
新闻推荐
蛇口高端品牌网站开发价格
蛇口高端品牌网站开发价格

蛇口高端品牌网站开发价格其次,网站建设的售后服务也非常完善。例如,站,可以及时解决浏览器兼容性问题或...

西乡网站制作多少钱
西乡网站制作多少钱

西乡网站制作多少钱工作中包含的内容很多,关键词的选择要谨慎细致,要注意定期更换,注意对流量多做分析,...

公明手机网站制作哪个好
公明手机网站制作哪个好

公明手机网站制作哪个好对于多次单击页面而没有看到所需内容的用户,站。的终页面的逻辑和物理结构应遵循次...

沙井网站外包哪个公司好
沙井网站外包哪个公司好

沙井网站外包哪个公司好第二在,群聊,邮件,贴吧等地站,把的优势要充分的推销给客户。第三:搜索引擎排名,...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top