고정 위치이지만 컨테이너에 상대적
나는 다음을 사용하여 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*/
}
수정 (2015 년 3 월) :
이것은 오래된 정보입니다. 이제 CSS3 변환의 마법을 사용하여 동적 크기 (가로 및 세로)의 콘텐츠를 중앙에 배치 할 수 있습니다. 동일한 원칙이 적용되지만 마진을 사용하여 컨테이너를 오프셋하는 대신 translateX(-50%). 너비가 고정되어 있지 않으면 오프셋 할 양을 모르기 때문에 위의 여백 트릭에서는 작동하지 않으며 50%요소가 아닌 부모에 상대적이기 때문에 상대 값 (예 :)을 사용할 수 없습니다. 적용. transform다르게 작동합니다. 해당 값은 적용되는 요소에 상대적입니다. 따라서 50%for 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 : absolute inside a position : relative container를 사용하여 div 내부에 새로운 고정 위치 div를 만들려는 경우와 같이 모든 것을 설정 position: absolute하지만 top 및 left 속성은 설정 하지 마십시오 . 그런 다음 컨테이너를 기준으로 원하는 위치에 고정됩니다.
예를 들면 :
/* 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속성을 존중하면 스크롤 컨텍스트가 상자처럼 요소의 테두리 위로 확장된다는 것입니다. -sizing이로 설정되었습니다 border-box. 일부 창의적인 경우, 이것은 아마도 장난감이 될 수 있습니다 :)
대답은 당신이 설정되어 있지 않는 한, '예' left: 0또는 right: 0당신은 DIV의 위치를 설정 한 후 고정합니다.
사이드 바 div를 확인하세요. 고정되어 있지만 창 뷰 포인트가 아닌 부모와 관련이 있습니다.
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이는 .NET과 개념적으로 유사한 요소를 배치하는 새로운 방법 position: fixed입니다. 차이점은 뷰포트에서 주어진 오프셋 임계 값이 충족 될 때까지 요소가 부모 내 position: sticky에서처럼 작동 한다는 것 position: relative입니다.
Chrome 56 (현재 2016 년 12 월 현재 베타 버전, 2017 년 1 월 안정화) 위치 : 이제 sticky가 돌아 왔습니다.
https://developers.google.com/web/updates/2016/12/position-sticky
자세한 내용은 Stick your lands에 있습니다! 위치 : WebKit의 끈적한 땅 .
중앙 컨테이너 (테이블 형식 데이터)가있는 유사한 문제를 해결하기 위해이 jQuery 플러그인을 만들었으며 목록이 스크롤 될 때 헤더가 페이지 상단에 고정되기를 원했지만 고정을 원했습니다. 컨테이너를 놓을 때마다 (가운데, 왼쪽, 오른쪽) 테이블 형식 데이터를 사용하고 가로로 스크롤 할 때 페이지와 함께 왼쪽과 오른쪽으로 이동할 수 있습니다.
이 문제를 해결할 수있는이 jQuery 플러그인에 대한 링크는 다음과 같습니다.
https://github.com/bigspotteddog/ScrollToFixed
이 플러그인에 대한 설명은 다음과 같습니다.
이 플러그인은 요소가보기에서 세로로 스크롤 된 경우 페이지 상단에 요소를 고정하는 데 사용됩니다. 그러나 가로 스크롤을 사용하여 요소가 계속 왼쪽 또는 오른쪽으로 이동할 수 있습니다.
marginTop 옵션이 주어지면 수직 스크롤이 목표 위치에 도달하면 요소가 수직 위로 이동을 중지합니다. 그러나 페이지가 왼쪽 또는 오른쪽으로 스크롤 될 때 요소는 여전히 수평으로 이동합니다. 페이지가 대상 위치를지나 다시 아래로 스크롤되면 요소가 페이지의 원래 위치로 복원됩니다.
이 플러그인은 Firefox 3/4, Google 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에서 상단 및 왼쪽 스타일을 가져옵니다. 여기에 예가 있습니다.
<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가있는 곳에 위치하지만 거기에 고정됩니다.
저는 제 고객이 콘텐츠 영역 외부에 앉기를 원한다는 광고로이 작업을 수행해야했습니다. 나는 단순히 다음과 같이했고 그것은 매력처럼 작동했습니다!
<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>
2019 솔루션 : position: sticky재산 을 사용할 수 있습니다 .
다음은 CODEPEN 의 사용법과 그와의 차이점을 보여주는 예제 입니다 position: fixed.
작동 방식은 아래에 설명되어 있습니다.
고정 위치가있는 요소는 사용자의 스크롤 위치에 따라 배치됩니다. 기본적으로
position: relative요소가 특정 오프셋을 넘어서 스크롤 될 때까지 작동하며 ,이 경우 위치 : 고정으로 바뀝니다. 뒤로 스크롤하면 이전 (상대적) 위치로 돌아갑니다.페이지의 다른 요소의 흐름에 영향을줍니다. 즉, 페이지의 특정 공간을 차지합니다 (예 :)
position: relative.컨테이너 내부에 정의 된 경우 해당 컨테이너를 기준으로 배치됩니다. 컨테이너에 오버플로 (스크롤)가있는 경우 스크롤 오프셋에 따라 위치 : 고정으로 바뀝니다.
따라서 고정 된 기능을 얻고 싶지만 컨테이너 내부에 있다면 sticky를 사용하십시오.
두 개의 HTML 요소와 순수 CSS (최신 브라우저)
이 jsFiddle 예제를 참조하십시오. 크기를 조정하고 고정 요소가 플로팅 요소와 함께 어떻게 움직이는 지 확인합니다. 가장 안쪽에있는 스크롤 막대를 사용하여 사이트에서 스크롤이 어떻게 작동하는지 확인합니다 (고정 요소가 고정 상태로 유지됨).
여기 많은이 언급 한 것처럼, 하나의 키에 어떤 위치 설정을 설정하지 않습니다 fixed(NO 요소 top, right, bottom, 또는 left값).
대신, 우리는 모든 고정 요소 (마지막 상자에 4 개가있는 방법에 유의)를 배치 할 상자에 먼저 넣습니다.
<div class="reference">
<div class="fixed">Test</div>
Some other content in.
</div>
그런 다음 및를 사용 하여 컨테이너 margin-top와 관련 margin-left하여 "이동"합니다.이 CSS가하는 것처럼 :
.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 0 스크롤 됨). 다시 두 가지 옵션이 있습니다. 첫 번째는 정적이거나 (일부 숫자) 부모 요소에서 읽어야합니다.
제 경우에는 정적 상단에서 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)에 상대적으로 나타납니다. INSTEAD OF는 브라우저 창에 상대적입니다 !!!
<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"가 위로 스크롤되고 보이지 않습니다.
내 javascript 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/
I have the same issue, one of our team members gives me a solution. To allowed the div fix position and relative to other div, our solution is to use a father container wrap the fix div and scroll 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%);
}
I did something like that awhile back. I was pretty new to JavaScript, so I'm sure you can do better, but here is a starting point:
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)
}
You will need to set your width, and then it gets the window width and changes the margin every few seconds. I know it is heavy, but it works.
It's possible if you use JavaScript. In this case, the jQuery plugin Sticky-Kit:
My project is .NET ASP Core 2 MVC Angular 4 template with Bootstrap 4. Adding "sticky-top" into main app component html (i.e. app.component.html) on the first row worked, as follows:
<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>Is that the convention or did I oversimplify this?
Check this:
<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>
참고URL : https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container
'program story' 카테고리의 다른 글
| Android에서 배경을 20 % 투명하게 만드는 방법 (0) | 2020.10.03 |
|---|---|
| JavaScript는 단일 스레드가 보장됩니까? (0) | 2020.10.03 |
| 태그는 Git의 브랜치와 어떻게 다릅니 까? (0) | 2020.10.03 |
| .gitignore에서 무시되는 특정 파일을 표시하는 Git 명령 (0) | 2020.10.03 |
| 어느 것이 더 빠릅니까 : while (1) 또는 while (2)? (0) | 2020.10.03 |