绝对css没有按预期工作

Question

绝对css没有按预期工作

我正试图在班级车上应用绝对定位.我希望它放在矩形内的左上角.当前行为被放置在页面的左上角,这是我不想要的.据我所知,绝对元素必须位于其祖先之内.

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jes*_*sse 5

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

归档时间：	8 年，2 月前
查看次数：	88 次
最近记录：	8 年，2 月前