绝对css没有按预期工作

时间:2017-11-13 12:34:26

标签: html css absolute

我正在尝试在课程 car 上应用绝对定位。我希望它放在左上角内部矩形中。当前行为被放置在页面的左上角,这是我不想要的。据我所知,绝对元素必须位于其祖先的内部。

body {
  padding: 25px;
}

.car {
  position: absolute;
}

#rectangle {
  /* display: inline-block;
            position: absolute;
            top: 150px;
            left:25px; */
  width: 3324px;
  height: 5112px;
  background-color: #00b3ee;
}

#intro {
  /* position: absolute;
            top: 800px;
            left:25px; */
  border: solid 1px;
  padding: 10px;
}
<body>

  <div id="intro">
    <p>
      Floor <b><i>{{ $title }}</i></b> setup successfully finished!
      <a href="{{ url('/admin/floors') }}" class="alert-link">Return to floors.</a>
    </p>
  </div>

  <div id="rectangle">
    <img src="{{ url($map_image_path) }}">
    <a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
      <img id="dynamic" src="http://localhost/ParkingMinis/public/images/icons/car/reza1.png">
    </a>
  </div>


</body>

3 个答案:

答案 0 :(得分:5)

position: relative添加到#rectangle课程。绝对定位是相对于第一个定位的祖先。

答案 1 :(得分:0)

嘿嘿嘿呀 http://learnlayout.com/position.html

&#13;
&#13;
#rectangle {
   
   position : relative;
       
  }
&#13;
&#13;
&#13;

答案 2 :(得分:0)

在这里,你好了。

&#13;
&#13;
 body
        {
            padding: 25px;
        }

        .car
        {
            position: absolute;
            top: 0 ;
            left:0;
            padding: 25px;
        }

        #rectangle
        {
          position:relative;
            width: 3324px;
            height: 5112px;
            background-color: #00b3ee;
        }
        
        #rectangle img{
          height: 50px;
        }

        #intro
        {
            /* position: absolute;
            top: 800px;
            left:25px; */
            border: solid 1px;
            padding: 10px;
        }
&#13;
<div id="intro">
     <p>
        Floor <b><i>{{ $title }}</i></b> setup successfully finished!
        <a href="{{ url('/admin/floors') }}" class="alert-link">Return to floors.</a>
    </p>
</div>

<div id="rectangle">
    <img src="{{ url($map_image_path) }}" >
    <a href="#" class="car" style="position: absolute; top: 0px; left: 0px;">
        <img id="dynamic" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
    </a>
</div>
&#13;
&#13;
&#13;