나는 div항상 다음을 사용하여 화면 상단에 붙어 있도록 수정하려고합니다 .

position: fixed;
top: 0px;
right: 0px;

그러나 div중앙 컨테이너 안에 있습니다. 내가 그것을 사용할 때 브라우저의 오른쪽에있는 것과 같이 브라우저 창에 상대적인 position:fixed것을 수정 div합니다. 대신, 컨테이너를 기준으로 고정해야합니다.

을 position:absolute기준으로 요소를 수정하는 데 사용할 수 div있지만 페이지를 아래로 스크롤하면 요소가 사라지고에서와 같이 맨 위에 고정되지 않습니다 position:fixed.

이것을 달성하기위한 해킹이나 해결 방법이 있습니까?

짧은 대답 : 아닙니다. (이제 CSS 변환으로 가능합니다. 아래 편집 참조)

긴 대답 : "고정 된"위치 지정 사용시 문제는 요소 가 흐름에서 빠져 나간다는 것입니다 . 따라서 부모가없는 것처럼 재배치 할 수 없습니다. 그러나 컨테이너의 너비가 고정 된 알려진 경우 다음과 같은 것을 사용할 수 있습니다.

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

편집 (03/2015) :

오래된 정보입니다. CSS3 변환의 마법을 사용하여 동적 크기 (가로 및 세로)의 내용을 가운데에 배치 할 수 있습니다. 동일한 원칙이 적용되지만 마진을 사용하여 컨테이너를 오프셋하는 대신을 사용할 수 있습니다 translateX(-50%). 너비가 고정되어 있지 않은 한 오프셋을 얼마나 많이 알지 못하고 상대적 요소 (예 50%:)를 부모 요소와 관련이 있기 때문에 상대 값을 사용할 수 없기 때문에 위의 마진 트릭으로는 작동하지 않습니다. 에 적용됩니다. transform다르게 행동합니다. 그 값은 적용되는 요소와 관련이 있습니다. 따라서 는 요소의 너비의 절반 50%을 transform의미 50%하고 여백은 부모 너비의 절반을 의미합니다. 이것은 IE9 + 솔루션입니다

위 예제와 유사한 코드를 사용하여 완전히 동적 너비와 높이를 사용하여 동일한 시나리오를 다시 만들었습니다.

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

중앙에 배치하려면 다음을 수행하십시오.

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

시민:

jsFiddle : 가로로만
중앙 정렬 jsFiddle : 가로와 세로로 중앙 맞춤 이 답변 에서 나에게 지적 해 준
사용자 신용은 사용자 aaronk6 에게 전달됩니다.

실제로 이것은 가능하며 허용되는 답변은 중앙 집중화만을 다루며, 이는 간단합니다. 또한 JavaScript를 사용할 필요가 없습니다.

이를 통해 모든 시나리오를 처리 할 수 ​​있습니다.

position : relative container in position : relative container를 배치하려는 경우 모든 것을 원하는대로 설정 한 다음을 사용하여 div 안에 새 고정 위치 div를 만들되 상단 및 왼쪽 속성을 설정 position: absolute하지 마십시오 . 그런 다음 컨테이너와 관련하여 원하는 곳에서 고정됩니다.

예를 들면 다음과 같습니다.

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}

<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

슬프게도,이 스레드가 Android의 WebKit 렌더링 상자 그림자 블러 픽셀에서 고정 위치 요소의 여백으로 문제를 해결할 수 있기를 바랐 지만 버그 인 것 같습니다.
어쨌든, 이것이 도움이되기를 바랍니다!

예, 사양에 따르면 방법이 있습니다.

Graeme Blackwood가 문제를 실질적으로 해결하기 때문에 받아 들일만한 대답이어야한다는 데 동의하지만 고정 요소 는 컨테이너에 상대적으로 배치 할 수 있습니다.

우연히 신청할 때

-webkit-transform: translateZ(0);

몸에 (뷰포트 대신) 고정 된 자식을 만들었습니다. 그래서 내 고정 요소left 와top 속성은 컨테이너와 관련이 있습니다.

그래서 몇 가지 조사를 한 결과 문제가 이미 Eric Meyer 에서 다루고 있음을 발견했습니다. 있고 그것이 "속임수"인 것처럼 느껴지더라도 이것이 사양의 일부라는 것이 밝혀졌습니다.

CSS 상자 모델에 의해 레이아웃이 제어되는 요소의 경우 변환에 대한 값 이외의 값은 스택 컨텍스트와 포함 블록을 모두 생성합니다. 객체는 고정 위치 자손의 포함 블록 역할을합니다.

http://www.w3.org/TR/css3-transforms/

따라서 부모 요소에 변환을 적용하면 포함 요소가됩니다.

그러나...

문제는 요소가 고정 된 것처럼 작동하지 않기 때문에 구현이 버그가 많거나 독창적이라는 것입니다 (이 비트가 사양의 일부가 아닌 것처럼 보이더라도).

Safari, Chrome 및 Firefox에서도 동일한 동작이 발견되지만 IE11에서는 고정 요소가 여전히 고정되어 있습니다.

또 다른 흥미로운 (언급되지 않은) 것은 고정 요소가 변환 된 요소 안에 포함되어 있으면 속성과 관련하여 컨테이너의 속성 top과 left속성이 컨테이너와 관련이 box-sizing있으며 스크롤 컨텍스트가 상자처럼 요소의 테두리 위로 확장된다는 것입니다 크기가로 설정되었습니다 border-box. 어떤 창조적 인 경우, 이것은 아마도 장난감이 될 수 있습니다 :)

테스트

대답은 당신이 설정되어 있지 않는 한, '예' left: 0또는right: 0 div 위치를 고정으로 설정 한 후에는 가능합니다.

http://jsfiddle.net/T2PL5/85/

사이드 바 사업부를 확인하십시오. 고정되어 있지만 창 뷰 포인트가 아닌 부모와 관련되어 있습니다.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>

position: sticky이는 개념적으로 유사한 요소를 배치하는 새로운 방법 position: fixed입니다. 차이점은 주어진 오프셋 임계 값이 뷰포트에서 충족 될 때까지 요소가 부모 내 position: sticky에서처럼 작동 한다는 것 position: relative입니다.

Chrome 56 (현재 2016 년 12 월 현재 베타, 2017 년 1 월 안정)에서 position : sticky가 돌아 왔습니다.

https://developers.google.com/web/updates/2016/12/position-sticky

자세한 내용은 착륙 스틱에 있습니다! position : WebKit의 끈적 끈적한 땅 .

2019 솔루션 : position: sticky속성 을 사용할 수 있습니다 .

다음은 사용법을 보여주는 CODEPEN 예제와 사용법과 다른 점입니다 position: fixed.

작동 방식은 다음과 같습니다.

1. 고정 위치를 가진 요소는 사용자의 스크롤 위치를 기준으로 배치됩니다. 기본적으로 position: relative요소가 특정 오프셋 이상으로 스크롤 될 때까지 작동하며 ,이 경우 위치가 고정됩니다. 다시 스크롤하면 이전 (상대) 위치로 돌아갑니다.

2. 페이지의 다른 요소의 흐름에 영향을 미칩니다. 즉 페이지에서 특정 공간을 차지합니다 (예 :) position: relative.

3. 컨테이너 내부에 정의되어 있으면 해당 컨테이너와 관련하여 배치됩니다. 컨테이너에 오버플로 (스크롤)가 있으면 스크롤 오프셋에 따라 위치가 고정됩니다.

따라서 컨테이너 내부에서 고정 기능을 달성하려면 스티커를 사용하십시오.

고정 위치 div에서 상단 및 왼쪽 스타일을 가져 가십시오. 여기에 예가 있습니다

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

#content div는 상위 div가있는 곳에 앉아 있지만 고정되어 있습니다.

이 jQuery 플러그인을 작성하여 중앙 컨테이너 (테이블 데이터)가있는 경우와 비슷한 문제를 해결했으며 목록을 스크롤 할 때 헤더가 페이지 상단에 고정되기를 원했지만 고정하려고했습니다. 컨테이너를 놓은 곳 (가운데, 왼쪽, 오른쪽)이 될 때마다 테이블 형식의 데이터를 사용하고 가로로 스크롤 할 때 페이지와 함께 왼쪽과 오른쪽으로 이동할 수 있습니다.

이 문제를 해결할 수있는이 jQuery 플러그인에 대한 링크는 다음과 같습니다.

https://github.com/bigspotteddog/ScrollToFixed

이 플러그인에 대한 설명은 다음과 같습니다.

이 플러그인은 요소가 세로로 스크롤되지 않은 경우 요소를 페이지 상단에 고정하는 데 사용됩니다. 그러나 가로 스크롤을 사용하여 요소를 계속 왼쪽 또는 오른쪽으로 이동할 수 있습니다.

marginTop 옵션이 주어지면 세로 스크롤이 대상 위치에 도달하면 요소가 세로로 위쪽으로 이동하지 않습니다. 그러나 페이지가 왼쪽 또는 오른쪽으로 스크롤 될 때 요소가 여전히 가로로 이동합니다. 페이지가 아래로 스크롤되면 대상 위치를 통과하면 요소가 페이지의 원래 위치로 복원됩니다.

이 플러그인은 Firefox 3/4, Chrome 10/11, Safari 5 및 Internet Explorer 8/9에서 테스트되었습니다.

특정 사례에 대한 사용법 :

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});

내 고객이 콘텐츠 영역 외부에 앉아 싶어한다는 광고로이 작업을 수행해야했습니다. 나는 단순히 다음을했고 매력처럼 일했습니다!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>

두 개의 HTML 요소와 순수 CSS (현대 브라우저)

이 jsFiddle 예제를 참조하십시오. 고정 요소가 부동 요소와 함께 이동하는 방식을 조정하고 확인하십시오. 가장 안쪽 스크롤 막대를 사용하여 사이트에서 스크롤이 어떻게 작동하는지 확인하십시오 (고정 요소는 고정 된 상태로 유지됨).

여기에 많은 사람들이 언급했듯이, 하나의 키에 어떤 위치 설정을 설정하지 않습니다 fixed(NO 요소 top, right, bottom, 또는left 값).

대신, 우리는 고정 된 요소 (마지막 상자에 4 개가있는 방법에 유의하십시오)를 먼저 배치 해야하는 상자에 넣습니다.

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

그런 다음 CSS와 같이 컨테이너와 관련하여 사용 margin-top하고 margin-left"이동"합니다.

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

fixed요소는 다른 모든 레이아웃 요소를 무시 하므로 바이올린 의 최종 컨테이너 에는 여러 fixed요소 가있을 수 있지만 여전히 왼쪽 위 모서리와 관련된 모든 요소가있을 수 있습니다. 그러나 컨테이너 내용에 분산되어 있으면 위치를 신뢰할 수 없다는 것을 비교 바이올린이 보여 주므로 컨테이너에 모두 먼저 배치 된 경우에만 해당됩니다 .

래퍼의 위치가 정적 인지 , 상대적 인지 또는 절대적 인지 여부는 중요하지 않습니다.

내 jQuery 플러그인 FixTo를 사용해 볼 수 있습니다 .

용법:

$('#mydiv').fixTo('#centeredContainer');

상대 고정 위치를 얻는 또 다른 이상한 해결책은 컨테이너를 iframe으로 변환하는 것입니다. 이렇게하면 고정 요소를 전체 페이지가 아닌 컨테이너의 뷰포트에 고정 할 수 있습니다.

순수한 CSS를 사용하면 관리 할 수 ​​없습니다. 적어도 나는하지 않았습니다. 그러나 jQuery를 사용하면 매우 간단하게 할 수 있습니다. 내 문제를 설명하겠습니다. 조금만 변경하면 사용할 수 있습니다.

따라서 시작을 위해 요소의 상단 (창 상단에서)이 고정되고 왼쪽 구성 요소가 부모 요소에서 상속되기를 원했습니다 (부모 요소가 가운데에 있기 때문에). 왼쪽 구성 요소를 설정하려면 요소를 부모에 넣고 부모 요소로 설정 position:relative하십시오.

그런 다음 스크롤 막대가 맨 위에있을 때 요소의 맨 위에서 얼마나 많은지 알아야합니다 (y zero scrolled). 다시 두 가지 옵션이 있습니다. 첫 번째는 정적이거나 (일부 숫자) 부모 요소에서 읽어야한다는 것입니다.

제 경우에는 상단 정적에서 150 픽셀입니다. 따라서 150을 볼 때 스크롤하지 않았을 때 맨 위의 요소는 얼마입니까?

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});

이것은 쉽습니다 (아래 HTML에 따라)

트릭은 "position : fixed;"과 함께 요소 (div)에서 상단 또는 왼쪽을 사용하지 않는 것입니다. 지정하지 않으면 "고정 내용"요소가 브라우저 창과 관련하여 둘러싸는 요소 ( "position : relative;"인 div)에 상대적으로 나타납니다 !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

위의 세로 스크롤로 div의 많은 텍스트 상단에 닫는 "X"버튼을 찾을 수있었습니다. "X"는 제자리에 있습니다 (스크롤 된 텍스트와 함께 이동하지 않지만 사용자가 브라우저 창의 너비를 조정할 때 둘러싸는 div 컨테이너와 함께 왼쪽 또는 오른쪽으로 이동합니다! 따라서 세로로 "고정"되지만 둘러싼 요소를 가로로!

이 작업을 수행하기 전에 텍스트 내용을 아래로 스크롤했을 때 "X"가 위로 스크롤되고 보이지 않게되었습니다.

내 자바 스크립트 hideDiv () 함수를 제공하지 않아서 죄송하지만 필연적 으로이 게시물을 더 길게 만들 것입니다. 가능한 한 짧게 유지하기로했습니다.

나는 변환을 사용하여 이것이 작동하는 방식을 설명하기 위해 jsfiddle을 만들었습니다.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

나는 같은 문제가 있는데, 우리 팀원 중 하나가 나에게 해결책을 제공합니다. div 수정 위치를 허용하고 다른 div와 관련하여 해결 방법은 아버지 컨테이너를 사용하여 수정 div를 감싸고 div를 스크롤하는 것입니다.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

CSS

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}

/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}

예 , 요소 의 위치 ( top또는 left등)를 설정하지 않는 한 가능 합니다 fixed( margin그러나 상대 위치를 설정하는 데 계속 사용할 수 있습니다 ). Simon Bos 는 이것에 대해 얼마전에 게시했습니다. .

그러나 고정 요소가 고정되지 않은 친척으로 스크롤되는 것을 기대하지 마십시오.

여기 데모를 참조 하십시오 .

나는 그와 같은 일을 잠시 뒤로했다. 나는 JavaScript를 처음 접했기 때문에 더 잘할 수 있다고 확신하지만 시작점이 있습니다.

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

너비를 설정 한 다음 창 너비를 가져와 몇 초마다 여백을 변경합니다. 나는 그것이 무겁다는 것을 알고 있지만 작동합니다.

JavaScript를 사용하면 가능합니다. 이 경우 jQuery 플러그인 Sticky-Kit :

내 프로젝트는 부트 스트랩 4가있는 .NET ASP Core 2 MVC Angular 4 템플릿입니다. 첫 번째 행의 기본 응용 프로그램 구성 요소 HTML (예 : app.component.html)에 "sticky-top"을 추가하면 다음과 같이 작동합니다.

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

컨벤션입니까 아니면 지나치게 단순화 했습니까?

position:fixedCSS 규칙 을 사용 하고 top/ left/ right/ 를 적용하려고 할 때bottom 하면 요소가 창을 기준으로 배치됩니다.

해결 방법은 / / / margin대신 속성 을 사용하는 것입니다.topleftrightbottom

이것을 확인하십시오 :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>