Vị trí tuyệt đối không hoạt động

Tôi đang cố gắng đặt một div có id 'absPos' ở vị trí tuyệt đối liên quan đến div gốc của nó. Nhưng nó không hoạt động, div được đặt ở góc trên cùng bên trái của trang.Vị trí tuyệt đối không hoạt động

mẫu mã của tôi là như sau

<html> 
    <body> 
     <div style="padding-left: 50px;"> 
      <div style="height: 100px"> 
       Some contents 
      <div> 

      <div style="height: 80px; padding-left: 20px;"> 
       <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> 
       Some text 
      </div> 
     </div> 
    </body> 
</html>

Bạn có thể giúp tôi giải quyết vấn đề này. Trong trường hợp thực tế của tôi thay vì màu nền đỏ tôi đã đặt một hình nền.

Kính trọng

Nguồn

2010-09-30 Ram

Áp dụng position:relative cho div cha.

<html> 
    <body> 
     <div style="padding-left: 50px;"> 
      <div style="height: 100px"> 
       Some contents 
      <div> 

      <div style="height: 80px; padding-left: 20px; position: relative;"> 
       <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> 
       Some text 
      </div> 
     </div> 
    </body> 
</html>

Nguồn

2010-09-30 12:34:48

Bạn cần phải cung cấp cho cha mẹ div relative vị trí đầu tiên:

<div style="height: 80px; padding-left: 20px; position:relative;">

Nguồn

2010-09-30 12:34:52 Sarfraz

Bạn cần phải khai báo div cha mẹ hoặc position: relative hoặc position: absolute riêng của mình.

relative là những gì bạn đang tìm kiếm trong trường hợp này.

Nguồn

2010-09-30 12:34:53

Nếu bạn đang đặt một phần tử có vị trí tuyệt đối, bạn cần phần tử cơ sở để có giá trị vị trí khác với giá trị mặc định.

Trong trường hợp của bạn nếu bạn thay đổi giá trị vị trí của div mẹ thành 'tương đối', bạn có thể khắc phục vấn đề.

Nguồn

2010-09-30 12:36:04

Thành phần thứ ba của phần tử của tôi có vị trí khác với mặc định, nhưng tôi cần phần tử của mình được đặt hoàn toàn ở phía trên bên trái của cửa sổ, vì vậy đối diện chính xác của câu hỏi này. Nó có thể được giúp đỡ? Tại sao nó hoạt động như thế? – Qwerty

Bạn cũng có thể Áp dụng Vị trí: tuyệt đối cho Div mẹ. Tổng số mã bên dưới

<html> 
    <body> 
     <div style="padding-left: 50px;"> 
      <div style="height: 100px"> 
       Some contents 
      <div> 

      <div style="height: 80px;position:absolute; padding-left: 20px;"> 
       <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div> 
       Some text 
      </div> 
     </div> 
    </body> 
</html>

Nguồn

2010-10-01 06:51:35 Rajasekar

Nếu, như tôi, bạn đang cố định vị trí một phần tử khác, phần tử nổi cần phải nằm trong phần tử kia, không phải là anh chị em. Giờ đây, position:absolute; của bạn có thể hoạt động!

Nguồn

2015-07-09 16:02:54

Vị trí tuyệt đối không hoạt động

Trả lời

Các vấn đề liên quan