các giá trị trái và đỉnh của một phần tử và phần tử con của nó nếu cả hai đều có vị trí là gì: tuyệt đối

Question

Tôi có html này, nơi vị trí nguyên tố là tuyệt đối, nhưng trái & hàng đầu là tự động:

<div style="position:absolute; width:100px; height:100px;"> 
    <span style="position:absolute;">Test child</span> 
</div> 

tôi cảm thấy bên trái là & đầu cho số span sẽ là 0 px, nhưng không thể giải mã được từ thông số kỹ thuật hoặc các bài đăng khác. Vì vậy, nếu tôi không chỉ định phần còn lại của & cho phần tử được định vị hoàn toàn mà cha mẹ cũng hoàn toàn được định vị & không có lề hoặc lề, bên trái và trên cùng sẽ là 0px, Có đúng theo thông số css không? Không.

Ngoài ra, trong cùng trường hợp như trên, nhưng dưới chế độ viết từ trên xuống dưới & chế độ viết từ trái sang phải, đầu & phải là 0px, phải không?

Chỉnh sửa: Để làm cho rõ ràng hơn, tôi có nghĩa là bên trái & đầu sẽ là 0px, 0px so với div mẹ. Hoặc là ở trên tương đương với:

<div style="position:absolute; width:100px; height:100px;"> 
    <span style="position:absolute;left:0px;top:0px">Test child</span> 
</div> 

Cảm ơn

Answer 1

Trước tiên, bạn nên lưu ý rằng các giá trị ban đầu cho trên cùng, bên trái, bên phải và dưới cùng là tự động và không 0. Xem section 9.3.2 of the specs

Vì vậy, để câu hỏi:

nếu tôi không nói rõ trái & hàng đầu cho vị trí tuyệt đối yếu tố mà cha mẹ cũng hoàn toàn vị trí & không có lợi nhuận hoặc đệm, bên trái và đỉnh sẽ là 0px, Điều đó có đúng theo css thông số kỹ thuật không?

Câu trả lời là không có điều này là đúng. Trong ví dụ của bạn, nó xảy ra là đúng bởi vì phần tử con được định vị ở đó trong luồng của tài liệu (thậm chí không có bất kỳ positining nào).

Như bạn có thể thấy trong ví dụ này:

<div style="position:absolute; width:100px; height:100px;"> 
 
    Some text 
 
    <span style="position:absolute;">Test child</span> 
 
</div>

Tác động duy nhất vị trí tuyệt đối có trong trường hợp này là để lấy phần tử ra khỏi dòng chảy nhưng nó vẫn còn ở vị trí ban đầu của nó .

Answer 2

Nếu không có cha mẹ với vị trí thiết lập để người thân, và bạn thiết lập các vị trí để tuyệt đối, mà sẽ ảnh hưởng đến yếu tố của bạn để có được một vị trí từ x (0) và y (0) (góc trên cùng bên trái màn hình), nếu bạn đặt ví dụ 2 div, số đầu tiên là position:relative và con của anh ấy có vị trí: tuyệt đối; ,, mục con đó sẽ bị ảnh hưởng từ x (0), y (0) từ vị trí gốc của nó.

<div style="position:absolute;">One</div> <-- this one will be on the left top of the screen , 

    <div style="position:relative;"> 
     <div style="position:absolute;">Here you go boy</div> 
    </div> 

(this children element gets the position of its parent element , not of the top-left screen) 

Trong trường hợp của bạn, bạn đã thiết lập cho cả hai yếu tố (div và span) position:absolute, nếu không có yếu tố phụ huynh với position:relative; họ tự động đi vào góc trên bên trái và bị rời (0) hàng đầu (0). Nếu bạn muốn phần tử span của bạn kế thừa vị trí của div, trước tiên bạn đã đặt position:relative; thành div của bạn và position:absolute; , đến khoảng thời gian của bạn và sau đó bạn phải điều chỉnh các pixel trên cùng và bên trái, tùy thuộc vào vị trí của phần tử bạn muốn, có một mã đơn giản bên dưới

============ =====================================

TRƯỜNG HỢP ĐẦU TIÊN: KHÔNG CẦN THIẾT VỊ TRÍ! HTML

<div> 
    <span>Test child</span> 
</div> 

CSS

div{ 
    height:100px; 
    width:100px; 
    border:2px solid black; 
    margin:0 auto; 
} 

span{ 
    position:absolute; 
    left:0px; 
    top:0px; 
} 

Trong mã này, tôi đã định vị div của bạn ở giữa, bởi (margin:0 auto) .I've thiết position:absolute đến tuổi của bạn và left:0 , top:0, (không có thừa kế, bởi vì div không chứa position:relative;).

=============================

THỨ HAI TRƯỜNG HỢP - THỪA KẾ

CSS:

div{ 
     height:100px; 
     width:100px; 
     border:2px solid black; 
     margin:0 auto; 
     position:relative; /* from since now , your span will be affected of div's position */ 
    } 

    span{ 
     position:absolute; 
     left:0px; 
     top:0px; 
    } 

Bây giờ phạm vi của bạn bị ảnh hưởng bởi vị trí của div và sẽ được đặt trên góc x (0) và y (0) trong div của bạn, chứ không phải màn hình. Tôi hy vọng bạn hiểu điều này.

Answer 3

Nếu yếu tố có position: absolute có cha hoặc mẹ không có vị trí tĩnh, như absolute, relative v.v. , quyết định cho đến khi đạt được phần tử cơ thể.

Nếu cơ thể, như trong trường hợp của bạn, div sẽ bắt đầu tại body 'lề s, span tại div' s left/top, và dưới đoạn hiển thị như thế nào nó hoạt động.

More đọc/thông số kỹ thuật ở đây: https://developer.mozilla.org/en-US/docs/Web/CSS/left

body { 
 
    margin: 30px; 
 
} 
 
div { 
 
    position:absolute; 
 
    width:100px; 
 
    height:100px; 
 
    background-color: lime; 
 
} 
 
span { 
 
    position:absolute; 
 
}

<div> 
 
    <span>Test child</span> 
 
</div>

Answer 4

Giá trị mặc định trái và hàng đầu là 0 cho khoảng tôi đã sử dụng trái và đỉnh bên trong div cha mẹ cho khoảng bạn có thể xóa top và trái để xem phần tử ở góc trên cùng bên trái xóa

#testChild { 
top:50px; 
left:10px; 
} 

sau khi xóa phần bạn chắc chắn có thể biết được mặc định rằng trái và hàng đầu là zero

https://jsfiddle.net/amarmagar17/op1nLep5/#

Answer 5

Trong khi đó là sự thật rằng, như @Nasco chỉ ra, một yếu tố position ed đề cập đến đó là cha mẹ nếu cha mẹ là position ed là tốt, nó doesn không phải là relative, điều đó đúng với bất kỳ số position ing nào, ngoài static (spec). Điều này thay đổi tham chiếu của phần tử cho top-bottom-left-right, nhưng không thay đổi giá trị.

small fiddle này chứng tỏ rằng một phần tử với position:absolute không có phối hợp bất kỳ đặc biệt điều trị, tức là nó vẫn dòng, như thể nó có position:relative;top:0;left:0; (đó sẽ là right:0; trong một khung cảnh RTL). Bạn có thể thấy điều này đặc biệt rõ ràng trong phần Test2.

Chrome devTools thậm chí không hiển thị top hoặc left trên thuộc tính được tính.

Tuy nhiên, position:absolute có các tác động khác, chẳng hạn như bỏ qua khối của cha mẹ đó. Điều này xảy ra bất kể, như đã thấy trong phần Test1.

BTW, bạn có thể nhìn thấy trong ở trên liên kết fixed(a subcategory of absolute) không nhận được quan tâm đặc biệt, rõ ràng render ra khỏi màn hình (Test5Fixed) trừ khi có một thuộc tính từ trên xuống dưới.hành vi phải trái như trên (Test3Fixed)

Không thể nhìn thấy bất cứ điều gì trong spec về nó, vì vậy nó có thể là phụ thuộc trình duyệt.