패딩을 무시하는 절대 위치 지정
절대 위치 요소를 어떻게 부모의 패딩을 존중하게합니까? 내부 div가 부모의 너비에 걸쳐 늘어나고 기본적으로 바닥 글 인 부모의 아래쪽에 배치되기를 원합니다. 그러나 아이는 부모의 패딩을 존중해야하며 그렇게하지 않습니다. 아이가 부모의 가장자리에 닿아 있습니다.
그래서 나는 이것을 원한다.
그러나 나는 이것을 얻고있다 :
<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>
내부 div 주위에 여백이 생길 수 있지만 추가하지 않아도됩니다.
먼저 왜 이런 일이 일어나는지 봅시다 .
놀랍게도 상자 position: absolute에 포함 상자가있는 경우 부모의 패딩 상자 (즉, 패딩 주위의 상자)이기 때문입니다. 일반적으로 (정적 또는 상대 위치 지정을 사용할 때) 포함 상자가 부모의 내용 상자 이기 때문에 놀라운 일 입니다.
조상이 인라인 요소 인 경우 포함 블록은 해당 요소에 대해 생성 된 첫 번째 및 마지막 인라인 상자의 패딩 상자 주위의 경계 상자입니다 .... 그렇지 않으면 포함 블록은 조상.
Winter의 답변에서 제안한 것처럼 가장 간단한 방법 padding: inherit은 절대 위치에 사용 하는 것 div입니다. 그러나 절대 위치 div에 추가 패딩을 원하지 않는 경우에만 작동합니다 . 가장 일반적인 용도의 솔루션 (두 요소 모두 자체 패딩을 가질 수 있음)은 다음과 같습니다.
div절대적으로 배치 된 주위에 상대적으로 배치 된 (패딩없이) 여분을 추가합니다div. 그 새로운div것은 부모의 패딩을 존중하고 절대 위치div는 그것을 채 웁니다.물론 단점은 단순히 프레젠테이션 목적으로 HTML을 엉망으로 만든다는 것입니다.
절대적으로 배치 된 요소에서 패딩을 반복하거나 추가하십시오.
여기서 단점은 CSS에서 값을 반복해야한다는 것입니다. CSS를 직접 작성하는 경우에는 취약합니다. 그러나이 같은 전처리 도구를 사용하는 경우
SASS또는LESS당신은 변수를 사용하여 해당 문제를 방지 할 수 있습니다. 이것이 개인적으로 사용하는 방법입니다.
시도 할 수있는 한 가지는 다음 CSS를 사용하는 것입니다.
.child-element {
padding-left: inherit;
padding-right: inherit;
position: absolute;
left: 0;
right: 0;
}
그것은 자식 요소가 부모로부터 패딩을 상속하도록 허용하고 자식은 부모와 패딩에 일치하도록 위치시킬 수 있습니다.
또한 box-sizing: border-box;관련 요소에 사용하고 있습니다.
모든 브라우저에서 이것을 테스트하지는 않았지만 Chrome, Firefox 및 IE10에서 작동하는 것 같습니다.
Well, this may not be the most elegant solution (semantically), but in some cases it'll work without any drawbacks: Instead of padding, use a transparent border on the parent element. The absolute positioned child elements will honor the border and it'll be rendered exactly the same (except you're using the border of the parent element for styling).
Use margin instead of padding in the parent div: http://blog.vjeux.com/2012/css/css-absolute-position-taking-into-account-padding.html
Here is my best shot at it. I added another Div and made it red and changed you parent's height to 200px just to test it. The idea is the the child now becomes the grandchild and the parent becomes the grandparent. So the parent respects its parent. Hope you get my idea.
<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>
Edit:
I think what you are trying to do can't be done. Absolute position means that you are going to give it co-ordinates it must honor. What if the parent has a padding of 5px. And you absolutely position the child at top: -5px; left: -5px. How is it suppose to honor the parent and you at the same time??
My solution
If you want it to honor the parent, don't absolutely position it then.
1.) you cannot use big border on parent -- in case you want to have a specific border
2.) you cannot add margin -- in case your parent is a part of some other container and you want your parent to take the full width of that grand parent.
적용 할 수있는 유일한 해결 방법은 자녀를 다른 용기에 싸서 부모가 조부모가 된 다음 새 자녀의 래퍼 / 부모에게 패딩을 적용하는 것입니다. 또는 어린이에게 직접 패딩을 적용 할 수 있습니다.
귀하의 경우 :
.css-sux{
padding: 0px 10px 10px 10px;
}
추가 레벨의 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>
데모 : https://jsfiddle.net/soxv3vr0/
참고 URL : https://stackoverflow.com/questions/17115344/absolute-positioning-ignoring-padding-of-parent
'Programing' 카테고리의 다른 글
| GitHub에서 요점을 어떻게 관리합니까? (0) | 2020.06.08 |
|---|---|
| Rails Model, View, Controller 및 Helper : 어디로 가는가? (0) | 2020.06.08 |
| 제공자가 Oracle 클라이언트 버전과 호환되지 않습니다 (0) | 2020.06.08 |
| Vim 매크로 저장 (0) | 2020.06.08 |
| 두 개의 비 연속 커밋을 어떻게 스쿼시합니까? (0) | 2020.06.08 |