絶対CSSが正常に動作しない

私はクラス車に絶対配置を適用しようとしています。私はそれが左上隅の中の矩形の中に置かれると期待しています。現在の動作は、私が欲しくないページの左上隅に配置されています。私が知る限り、絶対的な要素はその祖先の中に位置しなければならない。絶対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; 
 
}

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

出典

2017-11-13 Stack crawler

#rectangleクラスにposition: relativeを追加します。絶対配置は、最初に配置された祖先に相対的です。

出典

2017-11-13 12:35:16

最初に位置祖先（ 'relative'である必要はありません）。 – arbuthnott

cheackねえ、このうちhttp://learnlayout.com/position.html

#rectangle { 
 
    
 
    position : relative; 
 
     
 
    }

出典

2017-11-13 13:29:34 WAEX

ここでは、仲間を行きます。

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

出典

2017-11-13 13:31:37

絶対CSSが正常に動作しない

答えて

関連する問題