Question

我正在尝试在课程 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课程。绝对定位是相对于第一个定位的祖先。

Answer 2

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

＆＃13;

#rectangle {
   
   position : relative;
       
  }

＆＃13;

Answer 3

在这里，你好了。

＆＃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;

绝对css没有按预期工作

3 个答案: