CSS 위치 : 위치가 지정된 요소 내부에 고정
콘텐츠가 너무 길어서 스크롤바가 표시되는 위치 지정 div가 있습니다 ( overflow:auto설정). ajax 앱에서 대화 상자로 작동합니다. 사용자가 div를 스크롤 할 때 멀리 스크롤되지 않도록 오른쪽 상단 모서리에있는 닫기 버튼을 수정하고 싶습니다.
나는 그것을 position:fixed; right:0; top:0시도했지만 div (firefox에서)가 아닌 페이지의 오른쪽 상단에 버튼을 배치했습니다.
모든 스크롤 이벤트에서 js의 offsetWidth / Height로 해킹하지 않고 CSS 만 사용하여이 버튼 배치를 수행 할 수 있습니까?
추신 : div의 높이와 너비는 콘텐츠의 크기와 브라우저 창 크기에 따라 달라지는 고정 값이 아닙니다. 사용자는 원하는 경우 크기를 조정할 수도 있습니다.
를 사용할 수 position:fixed;있지만 설정 left및 top. 그런 다음을 사용하여 오른쪽으로 밀어 margin-left원하는 위치에 배치합니다.
여기에서 데모를 확인하십시오 : http://jsbin.com/icili5
현재 선택한 솔루션이 문제를 잘못 이해 한 것 같습니다.
비결은 절대 또는 고정 위치를 사용하지 않는 것입니다. 대신 div 외부에 닫기 버튼을두고 위치를 상대로 설정 하고 왼쪽 부동을 사용하여 div 바로 오른쪽에 있도록합니다. 다음으로 음의 왼쪽 여백과 양의 z 인덱스를 설정하여 div 위에 표시되도록합니다.
예를 들면 다음과 같습니다.
#close
{
position: relative;
float: left;
margin-top: 50vh;
margin-left: -100px;
z-index: 2;
}
#dialog
{
height: 100vh;
width: 100vw;
position: relative;
overflow: scroll;
float: left;
}
<body>
<div id="dialog">
****
</div>
<div id="close"> </div>
</body>
Position:fixed브라우저 창에 대한 절대 위치를 제공합니다. 물론 거기에갑니다.
while position:absolute은 부모 요소를 참조하므로 컨테이너 <div>의 <안에 버튼 을 배치 div>하면 의도 한 위치에 배치해야합니다. 같은 것
편집 : 포인트가있는 @Sotiris 덕분에 위치 : 고정 및 여백-왼쪽을 사용하여 솔루션을 얻을 수 있습니다. 이렇게 : http://jsfiddle.net/NeK4k/
나는 이것이 오래된 게시물이라는 것을 알고 있지만 동일한 질문이 있었지만 부모와 관련하여 요소가 고정되도록 설정하는 답변을 찾지 못했습니다 div. medium.com 의 스크롤 막대 position: fixed;는 뷰포트 (종류 *) 대신 부모 요소와 관련된 항목을 설정하기위한 훌륭한 순수 CSS 솔루션입니다 . 부모 div를 로 설정하고 position: relative;버튼 래퍼를 사용 하여 달성되며 position: absolute;물론 버튼은 position: fixed;다음과 같습니다.
<div class="wrapper">
<div class="content">
Your long content here
</div>
<div class="button-wrapper">
<button class="button">This is your button</button>
</div>
</div>
<style>
.wrapper {
position: relative;
}
.button-wrapper {
position: absolute;
right: 0;
top: 0;
width: 50px;
}
.button {
position: fixed;
top: 0;
width: 50px;
}
</style>
* 고정 요소는 페이지와 함께 스크롤되지 않기 때문에 수직 위치는 여전히 뷰포트에 상대적이지만 수평 위치는이 솔루션을 사용하는 부모에 상대적입니다.
CSS 변환을 사용할 수 있습니다.
" 'transform'속성은 요소에 새로운 로컬 좌표계를 설정합니다.",
but ... this is not cross-browser, seems only Opera works correctly
Try position:sticky on parent div of the element you want to be fixed.
More info here: http://html5-demos.appspot.com/static/css/sticky.html. Caution: Check for browser version compatibility.
I achieved to have an element with a fixed position (wiewport) but relative to the width of its parent.
I just had to wrap my fixed element and give the parent a width 100%. At the same time, the wrapped fixed element and the parent are in a div which width changes depending on the page, containing the content of the website. With this approach I can have the fixed element always at the same distance of the content, depending on the width of this one. In my case this was a 'to top' button, always showing at 15px from the bottom and 15px right from the content.
https://codepen.io/rafaqf/pen/MNqWKB
<div class="body">
<div class="content">
<p>Some content...</p>
<div class="top-wrapper">
<a class="top">Top</a>
</div>
</div>
</div>
.content {
width: 600px; /*change this width to play with the top element*/
background-color: wheat;
height: 9999px;
margin: auto;
padding: 20px;
}
.top-wrapper {
width: 100%;
display: flex;
justify-content: flex-end;
z-index: 9;
.top {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 100%;
background-color: yellowgreen;
position: fixed;
bottom: 20px;
margin-left: 100px;
cursor: pointer;
&:hover {
opacity: .6;
}
}
}
If your close button is going to be text, this works very well for me:
#close {
position: fixed;
width: 70%; /* the width of the parent */
text-align: right;
}
#close span {
cursor: pointer;
}
Then your HTML can just be:
<div id="close"><span id="x">X</span></div>
참고URL : https://stackoverflow.com/questions/4962266/css-positionfixed-inside-a-positioned-element
'development' 카테고리의 다른 글
| Iterable 매개 변수는 언제 허용해야합니까? (0) | 2020.11.08 |
|---|---|
| JavaScript의 JavaScript 파서 (0) | 2020.11.08 |
| 상위 유형 생성자가 호출되기 전에는 "X"를 참조 할 수 없습니다. 여기서 x는 최종 변수입니다. (0) | 2020.11.08 |
| git log --since는 어떻게 계산됩니까? (0) | 2020.11.08 |
| 원격 GitHub의 회색 아이콘은 무엇을 의미합니까? (0) | 2020.11.08 |