绝对 css 未按预期工作

Question

我正在尝试在 class 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>

Answer 1

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

Answer 2

嘿，看看这个 http://learnlayout.com/position.html

#rectangle {
   
   position : relative;
       
  }

Answer 3

给你伙计。

 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;
        }

<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/Whosebug/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
    </a>
</div>

绝对 css 未按预期工作

absolute css not working as expected

html

css

absolute