Định vị tuyệt đối bỏ qua phần đệm của cha mẹ

173

Làm thế nào để bạn thực hiện một yếu tố định vị tuyệt đối tôn vinh phần đệm của cha mẹ của nó? Tôi muốn một div bên trong trải dài theo chiều rộng của cha mẹ của nó và được đặt ở dưới cùng của cha mẹ đó, về cơ bản là chân trang. Nhưng đứa trẻ phải tôn trọng phần đệm của cha mẹ và nó không làm điều đó. Đứa trẻ được ấn thẳng lên cạnh của cha mẹ.

Vì vậy, tôi muốn điều này:

nhập mô tả hình ảnh ở đây

nhưng tôi đang nhận được điều này:

nhập mô tả hình ảnh ở đây

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>

Tôi có thể làm cho nó xảy ra với một lề xung quanh div bên trong, nhưng tôi không muốn phải thêm điều đó.

css padding css-position

— d512
nguồn

5

Tại sao không thay đổi bên trái / phải / dưới cùng của div bên trong thành style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?

— j08691

12

Vâng, tôi đã nghĩ về điều đó nhưng nó nhanh chóng trở thành một vấn đề đau đầu vì mỗi đứa trẻ phải có một bộ bù đắp riêng để giải quyết nó. Nếu họ chỉ tôn vinh phần đệm của cha mẹ thì bạn chỉ có thể đặt nó một lần trong cha mẹ và không phải lo lắng về tất cả các con.

— d512

Như đã chỉ ra ở trên, nếu bạn sử dụng giá trị của phần đệm của cha mẹ (vị trí tương đối) làm left:và right:trên con (vị trí tuyệt đối), vấn đề của bạn đã được giải quyết. Tôi đang thêm b / c này đó là câu trả lời mà những người khác có cùng vấn đề có thể đang tìm kiếm.

— rda3000

Có một vấn đề tương tự ở đây: jsfiddle.net/5n4By/6 . Chân trang đang tôn vinh phần đệm bên trái của cha mẹ nó, nhưng nó tràn ra bên phải. Bạn sẽ mong đợi nó tôn vinh phần đệm phù hợp cũng như duy trì sự nhất quán ...

— rafiki_rafi

186

Đầu tiên, hãy xem tại sao điều này xảy ra.

Lý do là, thật đáng ngạc nhiên, khi một hộp có hộp position: absolutechứa nó là hộp đệm của cha mẹ (nghĩa là hộp xung quanh phần đệm của nó). Điều này là đáng ngạc nhiên bởi vì thông thường (nghĩa là khi sử dụng định vị tĩnh hoặc tương đối), hộp chứa là hộp nội dung của cha mẹ .

Đây là phần có liên quan của đặc tả CSS :

Trong trường hợp tổ tiên là một phần tử nội tuyến, khối chứa là hộp giới hạn xung quanh các hộp đệm của hộp đầu tiên và hộp nội tuyến cuối cùng được tạo cho phần tử đó .... Mặt khác, khối chứa được tạo bởi cạnh đệm của tổ tiên.

Cách tiếp cận đơn giản nhất như được đề xuất trong câu trả lời của Winter là sử dụng padding: inherittrên vị trí tuyệt đối div. Tuy nhiên, nó chỉ hoạt động nếu bạn không muốn vị trí tuyệt đối divcó bất kỳ phần đệm bổ sung nào. Tôi nghĩ rằng các giải pháp cho mục đích chung nhất (trong đó cả hai yếu tố có thể có phần đệm độc lập của riêng chúng) là:

Thêm một vị trí tương đối bổ sung div(không có phần đệm) xung quanh vị trí tuyệt đối div. Cái mới đó divsẽ tôn trọng phần đệm của cha mẹ của nó và vị trí tuyệt đối divsau đó sẽ lấp đầy nó.

Dĩ nhiên, nhược điểm là bạn đang rối tung với HTML chỉ vì mục đích trình bày.
Lặp lại phần đệm (hoặc thêm vào nó) trên phần tử được định vị tuyệt đối.

Nhược điểm ở đây là bạn phải lặp lại các giá trị trong CSS của bạn, điều này dễ vỡ nếu bạn đang viết CSS trực tiếp. Tuy nhiên, nếu bạn đang sử dụng một công cụ xử lý trước như SASShoặc LESSbạn có thể tránh vấn đề đó bằng cách sử dụng một biến. Đây là phương pháp cá nhân tôi sử dụng.

— Kevin Christopher Henry
nguồn

Tại sao điều này là mặc định cho position: absolute? Điều đáng ngạc nhiên là hộp chứa là hộp đệm, nhưng phải có lý do cho nó, giống như tôi chắc chắn có lý do tại sao (không có box-sizing) widthvà heightkhông bao gồm đệm hoặc viền.

— phân chia

1

Chỉ là một bổ sung: không ai trong số này bị ảnh hưởng bởi box-sizingtài sản, trên cha mẹ hoặc con cái. Điều này là do điều đó ảnh hưởng đến kích thước , như chiều rộng / chiều cao, nhưng không ảnh hưởng đến hộp chứa, mặc dù tôi thừa nhận nó sẽ có ý nghĩa hơn nếu nó ảnh hưởng đến cả hai.

— phân chia

2

Đây là thông tin tốt, nhưng nó là câu trả lời SAU. Câu trả lời đúng là Winter's bên dưới .... sử dụng phần đệm: kế thừa và phần tử Tuyệt đối của bạn sẽ có phần đệm cần thiết. Không biết tại sao điều này có nhiều upvote hơn câu trả lời đúng ...: P

— NotaGuruAt ALL

1

@NotaGuruAt ALL: padding: inherithoạt động tốt nếu vị trí tuyệt đối divkhông cần bất kỳ phần đệm nào của riêng nó và tôi đã thêm một đề cập đến kỹ thuật đó. Tuy nhiên, nó kém linh hoạt hơn bởi vì bạn không thể thêm bất kỳ phần đệm bổ sung nào vào vị trí tuyệt đối div(nghĩa là bạn không thể nói padding: inherit + 5px). Đó là lý do tại sao tôi thích các kỹ thuật tôi đề cập ở đây.

— Kevin Christopher Henry

1

Đệm thừa kế trên position:absolutephần tử con thực sự hoạt động nếu bạn chỉ tìm kiếm đứa trẻ để tôn trọng phần đệm của cha mẹ. Tuy nhiên, nếu bạn đang tìm cách thêm phần đệm bổ sung vào đứa trẻ, bạn sẽ phải giữ tỷ lệ phần đệm trong mã của mình. Không có cách nào để làm điều đó chỉ với CSS.

— Dylan Pierce

51

Một điều bạn có thể thử là sử dụng css sau:

.child-element {
    padding-left: inherit;
    padding-right: inherit;
    position: absolute;
    left: 0;
    right: 0;
}

Nó cho phép phần tử con kế thừa phần đệm từ cha mẹ, sau đó phần tử con có thể được định vị để khớp với phần mở rộng của phần cha mẹ và phần đệm.

Ngoài ra, tôi đang sử dụng box-sizing: border-box;cho các yếu tố liên quan.

Tôi chưa thử nghiệm điều này trong tất cả các trình duyệt, nhưng dường như nó đang hoạt động trong Chrome, Firefox và IE10.

— Mùa đông
nguồn

Tôi đã kết hợp câu trả lời này và câu trả lời của @NewSpender. Trong trường hợp cụ thể của tôi, div vị trí tuyệt đối tiếp tục bỏ qua phần đệm nhưng bị giới hạn bởi phần tử cha của nó. Vì vậy, đưa ra vị trí div tuyệt đối với viền dày màu trắng giống như phần đệm tôi cần. Một điều kiện tiên quyết là nền của bạn cần phải cùng màu.

— Ogier Schelvis

Nhưng OP không muốn đứa trẻ được thừa hưởng phần đệm của cha mẹ. Anh ta muốn đứa trẻ được bù đắp theo phần đệm của cha mẹ.

— Michael Gummelt

30

Chà, đây có thể không phải là giải pháp tao nhã nhất (về mặt ngữ nghĩa), nhưng trong một số trường hợp, nó sẽ hoạt động mà không có bất kỳ nhược điểm nào: Thay vì đệm, hãy sử dụng đường viền trong suốt trên phần tử cha. Các phần tử con được định vị tuyệt đối sẽ tôn vinh đường viền và nó sẽ được hiển thị giống hệt nhau (ngoại trừ bạn đang sử dụng đường viền của phần tử cha để tạo kiểu).

— Người mới
nguồn

8

Sử dụng lề thay vì đệm trong div cha: http://blog.vjeux.com/2012/css/css-absolute-poseition-taking-into-account-padding.html

— Niloct
nguồn

Xin lưu ý rằng nền (màu) không được áp dụng cho lề như trên nền tảng

— Paul

6

Đây là bức ảnh đẹp nhất của tôi về nó. Tôi đã thêm một Div khác và làm cho nó thành màu đỏ và thay đổi chiều cao của bố mẹ bạn thành 200px chỉ để kiểm tra nó. Ý tưởng là đứa trẻ bây giờ trở thành cháu và cha mẹ trở thành ông bà. Vì vậy, cha mẹ tôn trọng cha mẹ của nó. Hy vọng bạn có được ý tưởng của tôi.

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 200px;">
     <div style="background-color: red;  position: relative; height: 100%;">    
        <div style="background-color: gray; position: absolute; left: 0px; right: 0px;bottom: 0px;">css sux</div>
     </div>
    </div>
  </body>
</html>

Biên tập:

Tôi nghĩ những gì bạn đang cố gắng không thể được thực hiện. Vị trí tuyệt đối có nghĩa là bạn sẽ cho nó phối hợp nó phải tôn vinh. Điều gì sẽ xảy ra nếu cha mẹ có phần đệm là 5px. Và bạn hoàn toàn định vị trẻ ở trên cùng: -5px; bên trái: -5px . Làm thế nào là giả sử để tôn vinh cha mẹ và bạn cùng một lúc ??

Giải pháp của tôi

Nếu bạn muốn nó tôn vinh cha mẹ, đừng hoàn toàn định vị nó sau đó.

— Chạm
nguồn

Cảm ơn, tôi đánh giá cao bài đăng, nhưng nó vẫn là một cách giải quyết cho vấn đề thực sự. Điều tôi thực sự muốn biết là nếu bạn có thể khiến trẻ tôn vinh phần đệm của yếu tố phụ huynh. Nếu hóa ra câu trả lời là không, tôi sẽ cung cấp cho bạn đại diện.

— d512

Nếu bạn hoàn toàn định vị chúng, thì chúng sẽ không tôn trọng yếu tố cha mẹ của chúng. Họ sẽ tôn trọng bạn. Vì lý do tương tự, nếu bạn không hoàn toàn định vị chúng, thì bạn thực sự không thể sử dụng những thứ như bottom: 10px vì chúng tôn trọng yếu tố cha mẹ của chúng. Nhưng những gì bạn muốn làm, tôi đoán sẽ nhường chỗ cho một mâu thuẫn và do đó, nó sẽ khác nhau trên các trình duyệt. Tôi nghĩ rằng chỉ có một công việc xung quanh sẽ làm.

— Chạm vào

3

Định vị tuyệt đối tôn vinh cha mẹ, đó là hệ tọa độ mà nó sử dụng. Khi bạn nói top 0px, điều đó có nghĩa là 0px so với đỉnh của cha mẹ. Câu hỏi đặt ra là có nên đưa phụ huynh vào tài khoản hay không. Nếu cha mẹ có phần đệm là 5px và bạn đã cho con trên cùng: -5px, nó sẽ đặt nó thẳng hàng với cha mẹ nếu phần đệm của cha mẹ được tôn vinh, hoặc cao hơn 5px so với cha mẹ nếu không.

— d512

3

1.) bạn không thể sử dụng đường viền lớn trên cha mẹ - trong trường hợp bạn muốn có đường viền cụ thể

2.) bạn không thể thêm lề - trong trường hợp cha mẹ bạn là một phần của một số container khác và bạn muốn cha mẹ của bạn lấy toàn bộ chiều rộng của cha mẹ lớn đó.

Giải pháp duy nhất nên áp dụng là bọc trẻ em của bạn trong một thùng chứa khác để cha mẹ bạn trở thành ông bà và sau đó áp dụng đệm cho Wrapper / Parent mới của trẻ em. Hoặc bạn có thể trực tiếp áp dụng đệm cho trẻ em.

Trong trường hợp của bạn:

.css-sux{
  padding: 0px 10px 10px 10px;
}

— bhavya_w
nguồn

1

Có thể dễ dàng thực hiện bằng cách sử dụng thêm một mức Div.

<div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
  <div style="position: absolute; left: 0px; right: 0px; bottom: 10px; padding:0px 10px;">
    <div style="background-color: gray;">css sux</div>
  </div>
</div>

Bản trình diễn: https://jsfiddle.net/soxv3vr0/

— asankasri
nguồn

0

thêm phần đệm: kế thừa ở vị trí tuyệt đối của bạn

.box{
  background: red;
  position: relative;
  padding: 30px;
  width:500px;
  height:200px;
 box-sizing: border-box;
 

}

<div  class="box">

  <div style="position: absolute;left:0;top:0;padding: inherit">top left</div>
  <div style="position: absolute;right:0;top:0;padding: inherit">top right</div>
  <div style="text-align: center;padding: inherit">center</div>
  <div style="position: absolute;left:0;bottom:0;padding: inherit">bottom left</div>
  <div style="position: absolute;right:0;bottom:0;padding: inherit">bottom right</div>


</div>

Mở rộng đoạn trích

— ßãlãjî
nguồn