programing

고정된 요소를 부모에 대해 배치할 수 있습니까?

muds 2023. 10. 23. 22:09
반응형

고정된 요소를 부모에 대해 배치할 수 있습니까?

제가 요소를 고정할 때, 부모가 상대적으로 위치하는지 여부는 중요하지 않습니다. 창에 상대적으로 위치하는지 여부는 중요하지 않습니다.

#wrapper {
  width: 300px;
  background: orange;
  margin: 0 auto;
  position: relative;
}

#feedback {
  position: fixed;
  right: 0;
  top: 120px;
}
<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

가능한 두 가지 질문에 대한 답변을 드리겠습니다.기존 제목(및 원래 게시물)은 편집 및 이후 설명에서 찾는 것과 다른 질문을 합니다.

요소를 부모 요소에 대해 "고정"으로 배치하려면position:absolute자식 요소와 부모 요소의 기본 또는 정적이 아닌 다른 위치 모드를 선택할 수 있습니다.

예를 들어,

#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }

이 위치는childDivparentDiv의 위치를 기준으로 왼쪽 50픽셀, 아래쪽 20픽셀의 요소입니다.

창을 기준으로 요소를 "고정"으로 배치하려면position:fixed, 사용할 수 있습니다.top:,left:,right:,그리고.bottom:적합한 위치에 배치할 수 있습니다.

예를 들어,

#yourDiv { position:fixed; bottom:40px; right:40px; }

이 위치는yourDiv웹 브라우저 창에 상대적으로 고정되어 있으며, 아래쪽 가장자리에서 40픽셀, 오른쪽 가장자리에서 40픽셀입니다.

CSS 규격은 다음을 요구합니다.position:fixed위치 요소가 아닌 뷰포트에 고정됩니다.

상위 항목에 대한 좌표를 지정해야 하는 경우 먼저 자바스크립트를 사용하여 뷰포트에 대한 상위 항목을 찾은 다음 하위(고정) 요소의 위치를 그에 맞게 설정해야 합니다.

대안: 일부 브라우저는sticky요소가 컨테이너와 뷰포트 내에 위치하도록 제한하는 CSS 지원.커밋 메시지에 따라:

sticky... 요소가 컨테이너 박스와 뷰포트의 교차점 안에 위치하도록 제한합니다.

고정 위치 요소는 상대적인 위치(공간은 흐름 내에 예약됨)와 같이 동작하지만 고정 위치에 따라 결정되는 오프셋과 함께 동작합니다.상대적이고 끈적임을 커버하도록 InFlowPositioned()가 변경되었습니다.

설계 목표에 따라 이러한 동작이 도움이 될 수도 있습니다.그것은 현재 작업 중인 초안이며, 테이블 요소를 제외하고 상당한 지지를 받고 있습니다.position: sticky아직 필요합니다.-webkitSafari의 접두사.

브라우저 지원에 대한 최신 통계는 caniuse를 참조하십시오.

2016년 업데이트

현대 브라우저에서는 컨테이너에 대해 고정된 요소를 배치하는 것이 가능합니다.변환 속성을 가진 요소는 고정 위치 하위 요소의 뷰포트 역할을 합니다.

또는 CSS Transforms Module에서 다음과 같이 표현합니다.

CSS 상자 모델에 의해 레이아웃이 제어되는 요소의 경우 변환 속성에 대한 none 이외의 값은 요소가 모든 하위 요소에 대한 포함 블록을 설정하게 합니다.패딩 상자는 모든 절대 위치 하위 항목, 고정 위치 하위 항목 및 하위 고정 배경 첨부 파일의 레이아웃에 사용됩니다.

.context {
  width: 300px;
  height: 250px;
  margin: 100px;
  transform: translateZ(0);
}
.viewport {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  overflow: scroll;
}
.centered {
  position: fixed;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
}
<div class="context">
  <div class="viewport">
    <div class="canvas">

      <table>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>

        <tr>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
          <td>stuff</td>
        </tr>
      </table>

      <button class="centered">OK</button>

    </div>
  </div>
</div>

먼저, 세트position: fixed그리고.left: 50%, 그리고 두 번째—이제 시작이 중심이 되어 여유를 가지고 새로운 위치를 설정할 수 있습니다.

이 해결책이 저한테 효과가 있어요!원본 상세 답변 참고 : https://stackoverflow.com/a/11833892/5385623

    
    .level1 {
        position: relative;
    }


    .level2 {
        position: absolute;
    }


    .level3 {
        position: fixed;
        /* Do not set top / left! */
    }
    <div class='level1'>
        <div class='level2'>
            <div class='level3'>
                Content
            </div>
        </div>
    </div>

나는 이것이 매우 오래되었다는 것을 알지만 내가 찾고 있던 (순수한 CSS) 답을 찾지 못한 후에 나는 이 해결책(medium.com 에서 발췌한 partially)을 생각했고 그것이 같은 일을 하고 싶어하는 다른 사람들에게 도움이 될 수 있다고 생각했습니다.

@DuckMaestro의 답을 조합하면 고정된 요소를 부모(실제 조부모)에 상대적으로 위치시킬 수 있습니다.position: absolute;한 요소를 부모 안에 위치시키다position: relative;그리고 나서.position: fixed;다음과 같이 절대 위치 요소 내부의 요소에 적용됩니다.

HTML

<div class="relative">
  <div class="absolute">
    <a class="fixed-feedback">This element will be fixed</a>
  </div>
</div>

CSS

.relative {
  margin: 0 auto;
  position: relative;
  width: 300px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
}

.fixed-feedback {
  position: fixed;
  top: 120px;
  width: 50px;
}

예

처럼 @JonAdams 의 position: fixed요소를 뷰포트에 상대적으로 배치해야 하지만 이 솔루션을 사용하면 요소의 수평적인 측면을 파악할 수 있습니다.

참고: 이것은 단순히 A를 설정하는 것과는 다릅니다.right아니면left창 크기가 조정되면 창이 수평으로 이동하기 때문에 고정 요소의 값입니다.

jQuery를 사용하여 페이지 요소의 오른쪽에 div(툴바)를 고정하기 위한 위의 Jon Adams 제안의 예는 다음과 같습니다.이 아이디어는 뷰포트의 오른쪽에서 페이지 요소의 오른쪽까지의 거리를 찾고 도구 모음의 오른쪽을 유지하는 것입니다!

HTML

<div id="pageElement"></div>
<div id="toolbar"></div>

CSS

#toolbar {
    position: fixed;
}
....

jQuery

function placeOnRightHandEdgeOfElement(toolbar, pageElement) {
    $(toolbar).css("right", $(window).scrollLeft() + $(window).width()
    - $(pageElement).offset().left
    - parseInt($(pageElement).css("borderLeftWidth"),10)
    - $(pageElement).width() + "px");
}
$(document).ready(function() {
    $(window).resize(function() {
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $(window).scroll(function () { 
        placeOnRightHandEdgeOfElement("#toolbar", "#pageElement");
    });
    $("#toolbar").resize();
});

오래된 게시물이지만 누군가가 필요할 경우를 대비하여 여기에 자바스크립트 솔루션을 남겨두겠습니다.

// you only need this function
function sticky( _el ){
  _el.parentElement.addEventListener("scroll", function(){
    _el.style.transform = "translateY("+this.scrollTop+"px)";
  });
}


// how to make it work:
// get the element you want to be sticky
var el = document.querySelector("#blbl > div");
// give the element as argument, done.
sticky(el);
#blbl{
  position:relative;
  height:200px;  
  overflow: auto;
  background: #eee;
}

#blbl > div{
  position:absolute; 
  padding:50px; 
  top:10px; 
  left:10px; 
  background: #f00
}
<div id="blbl" >
    <div><!-- sticky div --></div> 

    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>

메모들

  1. 저는 transform: translate Y(@px)를 사용했습니다. 왜냐하면 컴퓨팅, 고성능 애니메이션은 경량이어야 하기 때문입니다.

  2. 현대 브라우저에서만 이 기능을 사용해 보았습니다. 벤더가 필요한 이전 브라우저에서는 작동하지 않습니다(물론 IE도 가능합니다).

이것이 오래된 게시물이라는 것은 알지만, Jiew Meng이 무엇을 하려고 했는지에 대한 좋은 예는 이미 이 사이트에서 찾을 수 있다고 생각합니다.여기 https://stackoverflow.com/faq#questions 에 있는 사이드 메뉴를 확인해 보세요.너무 깊게 들어가지 않고 보면 스크롤이 앵커 태그 아래에 닿으면 자바스크립트가 고정된 위치를 부착하고 스크롤이 동일한 앵커 태그 위에 올라가면 고정된 위치를 제거하는 것을 알 수 있습니다.바라건대, 그것이 누군가를 올바른 방향으로 이끌 수 있기를 바랍니다.

여러 디브로 고정 y 디브와 절대 x 디브를 얻을 수 있었습니다.제 경우에는 중앙에 위치한 1180px 너비의 디바에 정렬된 왼쪽과 오른쪽의 디바가 필요했습니다.

    <div class="parentdiv" style="
        background: transparent;
        margin: auto;
        width: 100%;
        max-width: 1220px;
        height: 10px;
        text-align: center;">
        <div style="
            position: fixed;
            width: 100%;
            max-width: 1220px;">
            <div style="
                position: absolute;
                background: black;
                height: 20px;
                width: 20px;
                left: 0;">
            </div>
            <div style="
                width: 20px;
                height: 20px;
                background: blue;
                position: absolute;                                           
                right: 0;">
            </div>
        </div>
    </div>

언급URL : https://stackoverflow.com/questions/5209814/can-i-position-an-element-fixed-relative-to-parent

반응형

'programing' 카테고리의 다른 글

Powershell 서비스가 중지되거나 시작될 때까지 기다립니다.  (0) 2023.10.23
MySQL Workbench 문자 집합  (0) 2023.10.23
정확한 문자열 일치를 위해 LIKE 대 = 사용  (0) 2023.10.23
태그의 onclick 속성에서 비롯된 사용자 지정 기능에서 기본값을 호출하지 못하도록 하는 액세스 이벤트  (0) 2023.10.23
스위프트에서 NS Exception 포착  (0) 2023.10.23

'programing'의 다른글

  • 현재글고정된 요소를 부모에 대해 배치할 수 있습니까?

관련글

댓글

티스토리툴바