부모의 패딩을 무시하는 절대 포지셔닝
절대 위치 요소를 어떻게 하면 부모의 패딩을 기릴 수 있을까요?나는 내부 디브가 부모의 폭을 가로질러 뻗어나가서 그 부모의 가장 아래에 위치하기를 원합니다. 기본적으로 바닥.하지만 아이는 부모의 패딩을 존중해야 하고 그렇게 하지는 않습니다.아이가 부모의 가장자리에 바로 눌려 있습니다.
그래서 이걸 원해요
하지만 난 이해할 수 있어요
<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>이너 디브를 중심으로 여유를 두면서 그렇게 할 수는 있지만, 굳이 추가할 필요는 없겠군요.
먼저 왜 이런 일이 일어나는지 알아보겠습니다.
그 position: absolute포함 상자는 부모의 패딩 상자(즉, 패딩 주위의 상자)입니다.이는 일반적으로(즉, 정적 또는 상대 위치 지정을 사용하는 경우) 포함 상자가 상위 내용 상자이기 때문에 놀라운 일입니다.
상위 요소가 인라인 요소인 경우, 포함하는 블록은 해당 요소에 대해 생성된 첫 번째 및 마지막 인라인 상자의 패딩 상자 주위의 바운딩 상자입니다.그렇지 않은 경우 포함하는 블럭은 조상의 패딩 모서리에 의해 형성됩니다.
바와 가장 은 입니다를 하는 것입니다.padding: inheritdiv 합니다.div추가적인 패딩을 가질 수 있을 겁니다 ( 요소 독립적인 패딩을 가질 수 에서) 해결책은 두 요소 모두 독립적인 패딩을 가질 수 있다는 점에서)가장 범용적인 해결책은 다음과 같다고 생각합니다이라고 합니다.
가 지정된 항목을 합니다.
div으로 위치한 고)div그 .divt을 할 것입니다div그 다음에 채울 것입니다.물론 단점은 단순히 발표 목적으로 HTML을 엉망으로 만들고 있다는 것입니다.
절대 위치 요소에 패딩을 반복(또는 추가)합니다.
여기서 단점은 CSS에서 값을 반복해야 한다는 것입니다. CSS를 직접 작성할 경우 깨지기 쉽습니다.e와 같은
SASS아니면LESS변수를 사용하면 그 문제를 피할 수 있습니다.이것이 제가 개인적으로 사용하는 방법입니다.
한 가지 시도해 볼 수 있는 것은 다음과 같은 CSS를 사용하는 것입니다.
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
자식 요소가 부모로부터 패딩을 물려받도록 하면 자식을 부모 너비 및 패딩과 일치하도록 배치할 수 있습니다.
그리고 저는 사용하고 있습니다.box-sizing: border-box;관련된 요소에 대해서는
모든 브라우저에서 테스트를 해본 것은 아니지만 크롬, 파이어폭스, IE10에서 작동하는 것 같습니다.
이 솔루션은 (의미론적으로) 가장 훌륭한 솔루션은 아니지만 어떤 경우에는 단점 없이 작동할 수 있습니다.패딩 대신 상위 요소에 투명 테두리를 사용합니다.절대 위치의 자식 요소는 테두리를 준수하며 정확히 동일하게 렌더링됩니다(단, 스타일링에 부모 요소의 테두리를 사용하는 경우는 제외).
상위 디브에서 패딩 대신 마진 사용: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
여기에 제 최선의 방법이 있습니다.나는 단지 테스트를 하기 위해 다른 Div를 추가해서 빨간색으로 만들고 너의 부모님의 키를 200px로 바꿨습니다.아이디어는 이제 아이가 손자가 되고 부모가 조부모가 된다는 것입니다.그래서 부모는 부모를 존경합니다.제 생각을 알아 들으시길 바랍니다.
<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>
편집:
당신이 하려는 일은 어쩔 수 없다고 생각합니다.절대적 위치란 반드시 지켜야 할 좌표를 부여하겠다는 뜻입니다.만약 부모가 5px의 패딩을 가지고 있다면 어떻게 될까요?그리고 당신은 아이를 절대적으로 위에 위치시킵니다: -5px; 왼쪽: -5px.어떻게 부모님과 당신을 동시에 예우할 수 있습니까?
나의 해결책
부모님께 영광을 돌리고 싶다면, 절대적으로 위치를 잡지 마세요.
추가 레벨의 디브를 사용하면 쉽게 할 수 있었습니다.
<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>
데모: https://jsfiddle.net/soxv3vr0/
특정 에 큰 를 사용할 수 1.) . 특정 테두리를 가지려는 경우
가 해당 할 수 2.)다.
적용 가능한 유일한 해결책은 부모가 조부모가 되도록 자녀를 다른 용기에 포장한 후 새 자녀 래퍼/부모에 패딩을 적용하는 것입니다.아니면 아이들에게 직접 패딩을 입힐 수도 있습니다.
사용자의 경우:
.css-sux{
padding: 0px 10px 10px 10px;
}
padd padding:절대위치에 inherit
.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>아이의 폭을 이렇게 설정합니다.
.child {position: absolute; width: calc(100% - padding);}
공식에서 패딩은 왼쪽 부모와 오른쪽 부모의 패딩의 합입니다.아마 아주 우아하진 않을 거라고 인정하지만, 저 같은 경우에는 오버레이 기능을 가진 디브가 효과가 있었습니다.
언급URL : https://stackoverflow.com/questions/17115344/absolute-positioning-ignoring-padding-of-parent
'source' 카테고리의 다른 글
| 0과 1 사이의 난수를 생성하는 방법은? (0) | 2023.10.12 |
|---|---|
| 다중 설정 워드프레스 옵션 페이지 플러그인 (0) | 2023.10.12 |
| 불변 위반:텍스트 문자열은 구성 요소 내에서 렌더링되어야 합니다. (0) | 2023.10.12 |
| 농담에서 모의 던지기 오류를 적절하게 만드는 방법은? (0) | 2023.10.12 |
| ConstraintLayout 제약 조건 종속 뷰가 사라지면 레이아웃 뷰가 이상하게 동작합니다. (0) | 2023.10.12 |