上面的盒子设置水平居中之后,下面的盒子就跑上去了,

上面的盒子设置水平居中之后,下面的盒子就跑上去了,

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   .a3{
     width:1200px;
     height:400px;
     margin:100px 0;
     position:absolute;
     left:50%;
     margin-left:-600px;
     background:red;
     overflow:hidden;
    }
    .a4{
        width:100%;
        height:600px;
        background:#07cbc9;
        overflow: hidden;
        margin-top:-50px;
       }
  </style>
 </head>
 <body>
  <div class="a3"></div>
  <div class="a4"></div>
 </body>

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

可以给设置定位的元素嵌套一个父元素div ,然后设置高度 ,如下:

http://img1.sycdn.imooc.com//climg/5bc5798800019b0417610841.jpg

让它的父元素把蓝色盒子挤下来哦, 希望能够帮到你 , 祝学习愉快 ,望采纳

好帮手慕夭夭 2018-10-16 11:57:40

下面的蓝色盒子跑上去不是因为红色盒子设置了居中 ,而是因为红色盒子设置了绝对定位 , 如下:

http://img1.sycdn.imooc.com//climg/5bc5613c00014db104770245.jpg

因为设置定位后会脱离文档流 ,就不会占据文档流的位置 ,所以蓝色的盒子会跑上来哦. 

希望解答了你的疑惑 ,祝学习愉快 ,望采纳

  • 提问者 宋紫月 #1
    那要怎样才可以让蓝色盒子回到原位呢
    2018-10-16 12:03:22
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师