패딩을 무시하는 절대 위치 지정

173

절대 위치 요소를 어떻게 부모의 패딩을 존중하게합니까? 내부 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 주위에 여백이 생길 수 있지만 추가하지 않아도됩니다.

css  padding  css-position 
— d512
소스
5
내부 div의 왼쪽 / 오른쪽 / 아래를 style="background-color: gray; position: absolute; left: 10px; right: 10px; bottom: 10px;"?
— j08691
12
그래, 나는 그것을 생각했지만 모든 어린이가 그것을 해결하기 위해 자체 오프셋 세트를 가져야하기 때문에 유지 관리 두통이 빠르게됩니다. 부모의 패딩을 존중한다면 부모에서 한 번만 설정하면 모든 어린이에 대해 걱정할 필요가 없습니다.
— d512
당신이로 (상대 위치) 부모의 패딩의 값을 사용하는 경우, 위에서 지적한 바와 같이 left:와 right:제 (절대 위치) 아이, 문제는 해결된다. 나는 같은 문제를 가진 다른 사람들이 찾고있는 대답 인이 B / C를 추가하고 있습니다.
— rda3000
비슷한 문제가 있습니다 : jsfiddle.net/5n4By/6 . 바닥 글은 부모의 왼쪽 패딩을 존중하지만 오른쪽에 넘칩니다. 당신은 그것이 올바른 패딩을 존중하고 일관성을 유지하기를 기대할 것입니다 ...
— rafiki_rafi

답변:

186

먼저 왜 이런 일이 일어나는지 봅시다 .

놀랍게도, 상자 position: absolute에 포함 상자가있는 경우 부모의 패딩 상자 (즉, 패딩 주위의 상자)이기 때문입니다. 일반적으로 (정적 또는 상대 위치 지정을 사용할 때) 포함 상자가 부모의 내용 상자 이기 때문에 놀라운 일 입니다.

CSS 사양 의 관련 부분은 다음과 같습니다 .

조상이 인라인 요소 인 경우 포함 블록은 해당 요소에 대해 생성 된 첫 번째 및 마지막 인라인 상자의 패딩 상자 주위의 경계 상자입니다 .... 그렇지 않으면 포함 블록은 조상.

Winter의 답변에서 제안한 것처럼 가장 간단한 방법 padding: inherit은 절대 위치에 사용 하는 것 div입니다. 그러나 절대 위치 div에 추가 패딩을 원하지 않는 경우에만 작동합니다 . 가장 일반적인 용도의 솔루션 (두 요소 모두 자체 패딩을 가질 수 있음)은 다음과 같습니다.

  1. div절대적으로 배치 된 주위에 상대적으로 배치 된 (패딩없이) 여분을 추가합니다 div. 그 새로운 div것은 부모의 패딩을 존중하고 절대 위치 div는 그것을 채 웁니다.

    물론 단점은 단순히 프레젠테이션 목적으로 HTML을 엉망으로 만든다는 것입니다.

  2. 절대적으로 배치 된 요소에서 패딩을 반복하거나 추가하십시오.

    여기서 단점은 CSS에서 값을 반복해야한다는 것입니다. CSS를 직접 작성하는 경우에는 취약합니다. 그러나이 같은 전처리 도구를 사용하는 경우 SASS또는 LESS당신은 변수를 사용하여 해당 문제를 방지 할 수 있습니다. 이것이 개인적으로 사용하는 방법입니다.

— 케빈 크리스토퍼 헨리
소스
이것이 왜 기본값 position: absolute입니까? 포함하는 상자가 패딩 박스이다 놀라운 일이다, 그러나 나는 확실히 (없는 이유가 있어요처럼, 그것에 대한 이유가되어 있어야합니다 box-sizing)에 width&가 height패딩 또는 테두리가 포함되어 있지 않습니다.
— trysis
1
단지 추가 사항 :이 중 어느 것도 box-sizing부모 또는 자식 의 속성에 영향을받지 않습니다 . 너비 / 높이와 같이 사이징에 영향을 주지만 포함 상자에는 영향을 미치지 않지만 크기에 영향 을 주면 더 큰 의미가 있음을 인정하기 때문입니다.
— trysis
2
이것은 좋은 정보이지만 잘못된 답변입니다. 정답은 Winter 's 아래입니다 .... padding 사용 : inherit를 사용하면 Absolute 요소가 필요한 패딩을 얻습니다. 왜 이것이 정답보다 더 많은
— 투표를했는지 모릅니다
1
@NotaGuruAtAll : padding: inherit절대 위치 div가 자체 패딩을 필요로하지 않으면 잘 작동 하며 해당 기술에 대한 언급을 추가했습니다. 그러나 절대적으로 배치 된 패딩을 추가 할 수 없기 때문에 유연성이 떨어집니다 div(예 : 말할 수 없음 padding: inherit + 5px). 그렇기 때문에 여기서 언급 한 기술을 선호합니다.
— Kevin Christopher Henry
1
position:absolute부모 요소의 패딩을 존중하기 위해 자식을 찾고 있다면 자식 요소 에서 상속하는 패딩 이 실제로 작동합니다. 그러나 자식 에 추가 패딩 을 추가 하려면 코드에서 패딩 비율을 확인해야합니다. CSS만으로 깔끔한 방법은 없습니다.
— Dylan Pierce
51

시도 할 수있는 한 가지는 다음 CSS를 사용하는 것입니다.

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

그것은 자식 요소가 부모로부터 패딩을 상속하도록 허용하고 자식은 부모와 패딩에 일치하도록 위치시킬 수 있습니다.

또한 box-sizing: border-box;관련 요소에 사용하고 있습니다.

모든 브라우저에서 이것을 테스트하지는 않았지만 Chrome, Firefox 및 IE10에서 작동하는 것 같습니다.

— 겨울
소스
이 답변과 @NewSpender의 답변을 결합했습니다. 내 특정의 경우에, 절대 위치 DIV는 패딩을 무시하지만, 유지 된 부모 요소에 의해 경계. 따라서 흰색 두꺼운 테두리가있는 절대 위치 div를 제공하면 필요한 패딩이 모방되었습니다. 그러나 전제 조건은 배경색이 같아야한다는 것입니다.
— Ogier Schelvis
그러나 OP는 자식이 부모의 패딩을 상속하지 않기를 원합니다. 그는 부모의 패딩에 따라 자녀가 상쇄되기를 원합니다.
— Michael Gummelt
30

글쎄, 이것은 (의미 적으로) 가장 우아한 해결책은 아니지만 어떤 경우에는 단점없이 작동합니다. 패딩 대신 부모 요소에 투명한 테두리를 사용하십시오. 절대 위치의 자식 요소는 테두리를 따르며 스타일에 부모 요소의 테두리를 사용하는 것을 제외하고는 정확히 동일하게 렌더링됩니다.

— NewSpender
소스
6

여기에 최선의 기회가 있습니다. 다른 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 . 부모와 당신을 동시에 공경하는 것이 어떻습니까?

내 솔루션

부모를 존중하기를 원한다면 절대로 위치를 지정하지 마십시오.

— 접촉
소스
고마워, 나는 게시물을 주셔서 감사하지만 실제 문제에 대한 해결 방법입니다. 내가 정말로 알고 싶은 것은 자녀가 부모 요소의 패딩을 존중하게 할 수 있는지입니다. 대답이 '아니요'인 경우 담당자에게 알려 드리겠습니다.
— d512
당신이 그들을 절대적으로 배치한다면, 그들은 그들의 부모 요소를 존중하지 않을 것입니다. 그들은 당신을 존중합니다. 같은 이유로, 절대 위치를 지정하지 않으면 부모 요소를 존중하기 때문에 bottom : 10px 와 같은 것을 실제로 사용할 수 없습니다 . 그러나 당신이하고 싶은 것은 모순의 여지가 생길 것이라고 생각합니다. 따라서 브라우저마다 다릅니다. 나는 해결 방법 만 할 것이라고 생각합니다.
— 터치
3
절대 위치는 부모를 존중합니다. 그것이 사용하는 좌표계입니다. top 0px라고 말하면 부모의 상단에서 0px 떨어져 있다는 의미입니다. 문제는 부모 패딩을 고려해야하는지 여부입니다. 부모가 5px의 패딩을 가지고 있고 자녀에게 top -5px를 주면 부모의 패딩이 존중되면 부모와 함께 플러시하거나 부모가 아닌 경우 부모보다 5px 위에 놓습니다.
— d512
3

1.) 부모에게 큰 테두리를 사용할 수 없습니다-특정 테두리를 원할 경우

2.) 여백을 추가 할 수 없습니다-부모가 다른 컨테이너의 일부이고 부모가 전체를 차지하기를 원하는 경우 그 웅대 한 부모의 폭.

적용 할 수있는 유일한 해결 방법은 자녀를 다른 용기에 싸서 부모가 조부모가 된 다음 새 자녀의 래퍼 / 부모에게 패딩을 적용하는 것입니다. 또는 어린이에게 직접 패딩을 적용 할 수 있습니다.

귀하의 경우 :

.css-sux{
  padding: 0px 10px 10px 10px;
}
— bhavya_w
소스
1

추가 레벨의 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/

— 아칸 카스 리
소스
0

패딩 추가 : 절대 위치에서 상속

.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>
스 니펫 확장

— ßãlãjî
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.