고정 위치이지만 용기에 상대적임
나는 수정하려고 노력 중입니다.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*/
}
편집(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에게 돌아옵니다.
실제로 이것은 가능하며 받아들여진 대답은 중앙 집중화만 다루는데, 이는 충분히 간단합니다.또한 자바스크립트를 사용할 필요가 없습니다.
이를 통해 다음과 같은 시나리오를 처리할 수 있습니다.
설정을 대로 것을 컨테이너를 , 위를지정경모것우설다을정니로 div 안에 . 위치 내부의 절대: 상대 컨테이너, 그리고 다음으로 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>슬프게도, 저는 이 스레드가 안드로이드의 웹킷 렌더링 상자 그림자 블러 픽셀을 고정 위치 요소의 여백으로 사용하는 제 문제를 해결할 수 있기를 바랬는데, 버그인 것 같습니다.
네, 사양대로라면 방법이 있습니다.
저는 그레이엄 블랙우드의 답변이 받아들여져야 한다는 데 동의하지만, 실질적으로 문제를 해결하기 때문에 고정 요소가 용기에 상대적으로 위치할 수 있다는 점에 유의해야 합니다.
신청할 때 우연히 알게 되었습니다.
-webkit-transform: translateZ(0);
신체에 대해, 그것은 그것에 관련된 고정된 아이를 만들었습니다(뷰포트의 일부).그래서 나의 고정된 요소들은left그리고.top속성이 이제 컨테이너에 상대적이었습니다.
그래서 제가 조사를 해보니, 이 문제는 이미 에릭 마이어에 의해 다루어졌고, 비록 그것이 "꼼수"처럼 느껴지더라도, 이것이 사양의 일부라는 것을 알게 되었습니다.
레이아웃이 CSS 상자 모델에 의해 제어되는 요소의 경우 변환에 대한 값이 아닌 다른 값은 스태킹 컨텍스트와 포함 블록을 모두 생성합니다.개체는 고정된 하위 항목을 포함하는 블록 역할을 합니다.
http://www.w3.org/TR/css3-transforms/
따라서 변환을 부모 요소에 적용하면 해당 변환이 포함 블록이 됩니다.
그렇지만.....
문제는 구현이 버그가 있거나 창의적인 것처럼 보인다는 것입니다. 요소도 고정적으로 작동하지 않기 때문입니다(이 비트가 사양의 일부가 아닌 것처럼 보이더라도).
동일한 동작은 Safari, Chrome 및 Firefox에서 발견되지만 IE11(고정 요소가 여전히 고정된 상태로 유지됨)에서는 발견되지 않습니다.
다른 되지 않은)원소 때 그 원소의 또 다 른 문 흥 요 고 변 가 요 안 때 에 반 면 있 을 포 어 되 에 함 소 않 은 된 것 소 은 환 정 운 미 된 로 지 되 화 서 ▁another ▁when ▁that ▁a un 에 면 반 ▁its ▁is , ▁thing ▁interest ▁is 문 ▁inside 때 do ▁( ing edtop그리고.left 이 에 대한 것입니다.box-sizing이는 마치 , 스해컨는마로 설정된 됩니다.border-box에 있는 창의적인 에게, 가 될 수 :) 의적인사게이창놀이될이다있니습 :)
네 입은예 '니답'다대 '입''만. 설정하지 않는 한left: 0또는right: 0를 fixeddiv로 후.
사이드바 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그것은 개념적으로 유사한 요소를 위치시키는 새로운 방법입니다.position: fixed차이점은 다음과 같은 요소가 있다는 것입니다.position: sticky 럼행다니합처럼 합니다.position: relative뷰포트에서 지정된 오프셋 임계값이 충족될 때까지 상위 항목 내에서.
Chrome 56(2016년 12월 현재 베타, 2017년 1월 안정) 포지션: 스틱이 이제 돌아왔습니다.
https://developers.google.com/web/updates/2016/12/position-sticky
자세한 내용은 Stick your lands! position: WebKit의 끈적끈적한 땅에 있습니다.
2019년 솔루션:사용할 수 있습니다.position: sticky소유물.
다음은 CODEPEN의 사용법과 CODEPEN과의 차이점을 보여주는 예입니다.position: fixed.
작동 방식은 아래에 설명되어 있습니다.
고정 위치를 가진 요소는 사용자의 스크롤 위치를 기준으로 배치됩니다.그것은 기본적으로 다음과 같이 행동합니다.
position: relative요소가 특정 오프셋 이상으로 스크롤될 때까지(이 경우 위치: 고정).다시 스크롤하면 이전(상대) 위치로 돌아갑니다.하는 것과 . 페이지의 특정 공간을 차지합니다.
position: relative).컨테이너 내부에 정의된 경우 해당 컨테이너에 대해 위치가 지정됩니다.용기에 오버플로(스크롤)가 있으면 스크롤 오프셋에 따라 위치:fixed로 바뀝니다.
따라서 고정된 기능을 달성하고 싶지만 용기 안에 있는 경우에는 스틱을 사용합니다.
컨테이너가 특정 격납 규칙을 사용하는 경우 컨테이너에 대해 고정된 위치로 요소를 배치할 수 있습니다.
<div class='parent'>
<div class='child'></div>
</div>
.parent {
contain: content;
}
.child {
position: fixed;
top: 0;
left: 0;
}
고정 위치 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
이 플러그인에 대한 설명은 다음과 같습니다.
이 플러그인은 요소가 보기에서 수직으로 스크롤된 경우 페이지 상단에 요소를 고정하는 데 사용됩니다. 그러나 수평 스크롤을 사용하여 요소를 계속 왼쪽 또는 오른쪽으로 이동할 수 있습니다.
옵션 여백Top을 지정하면 수직 스크롤이 대상 위치에 도달하면 요소가 수직 위로 이동을 중지하지만 페이지가 왼쪽 또는 오른쪽으로 스크롤될 때 요소가 수평으로 계속 이동합니다.대상 위치를 지나 페이지를 뒤로 스크롤하면 요소가 페이지의 원래 위치로 복원됩니다.
이 플러그인은 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 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>
당신이 변화한다면 해결책이 있습니다.position: fixed;position: sticky;
따라서 코드는 다음과 같아야 합니다.
position: sticky;
top: 0;
right: 0;
이제 다른 디브들은 밑으로 미끄러지지 않을 것입니다.
두 개의 HTML 요소와 순수 CSS(현대 브라우저)
이 jsFiddle 예제를 참조하십시오.크기를 조정하고 고정 요소가 부동 요소와 함께 이동하는 방식을 확인합니다.가장 안쪽 스크롤 막대를 사용하여 사이트에서 스크롤이 어떻게 작동하는지 확인합니다(고정 요소는 고정 상태로 유지됨).
여기서 많은 사람들이 말했듯이, 하나의 열쇠는 위치 설정을 하지 않는 것입니다.fixed(으)로 표시됨)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요소는 다른 모든 레이아웃 요소를 무시합니다. Fidle의 최종 컨테이너는 여러 개를 가질 수 있습니다.fixed왼쪽 상단 모서리와 관련된 모든 요소가 있습니다.그러나 이는 컨테이너 내용물 내에서 분산되면 위치 지정이 신뢰할 수 없다는 것을 이 비교 피들이 모두 컨테이너에 먼저 배치된 경우에만 해당됩니다.
래퍼가 정적이든, 상대적이든, 절대적이든 위치 지정은 중요하지 않습니다.
고지 사항:
이것은 단지 제목에 대한 답입니다.고정 위치이지만 용기에 상대적입니다.사용자가 요청하는 실제 사용 사례position: sticky가는 길입니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
상위 항목 중 하나에 변환, 관점 또는 필터 속성이 없는 경우를 제외하고 뷰포트에 의해 설정된 초기 포함 블록에 상대적으로 위치합니다.
컨테이너에 변환을 추가하기만 하면 고정 요소의 위치는 컨테이너에 상대적입니다.내 생각엔transform: translateX(0);충분할 것입니다.
당신은 제 jQuery 플러그인 FixTo를 사용해 볼 수 있습니다.
용도:
$('#mydiv').fixTo('#centeredContainer');
순수한 CSS로는 당신은 그것을 할 수 없습니다; 적어도 저는 하지 않았습니다.그러나 jQuery를 사용하면 매우 간단하게 수행할 수 있습니다.제가 제 문제를 설명해 드릴 테니 조금만 바꿔주시면 됩니다.
먼저, 요소에 고정된 위쪽(창 위쪽)과 왼쪽 구성요소가 부모 요소에서 상속되도록 했습니다(부모 요소가 가운데에 있기 때문입니다).왼쪽 구성 요소를 설정하려면 요소를 부모에 넣고 설정합니다.position:relative상위 요소에 대한.
그런 다음 스크롤 막대가 맨 위에 있을 때(y 제로 스크롤) 요소가 맨 위에서 얼마나 되는지 알아야 합니다. 다시 두 가지 옵션이 있습니다.첫째, 정적(일부 숫자)이거나 상위 요소에서 읽어야 합니다.
제 경우에는 상단 정전기에서 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');
});
상대적으로 고정된 위치를 얻기 위한 또 다른 이상한 해결책은 컨테이너를 iframe으로 변환하는 것입니다. 그러면 고정된 요소가 전체 페이지가 아닌 컨테이너의 뷰포트에 고정될 수 있습니다.
합니다.top또는left의 ()의 의 ()의.fixed해서 margin상대적인 위치를 설정하는 것).사이먼 보스가 얼마 전에 이것에 대해 글을 올렸습니다.
그러나 고정 요소가 고정되지 않은 친척과 함께 스크롤될 것으로 예상하지 마십시오.
여기에서 데모를 참조하십시오.
저도 같은 문제가 있는데, 팀원 중 한 명이 해결책을 제시합니다.div 픽스 위치를 허용하고 다른 div와 비교하기 위해, 우리의 솔루션은 상위 컨테이너 랩 픽스 div와 스크롤 div를 사용하는 것입니다.
.container {
position: relative;
flex:1;
display:flex;
}
.fix {
position:absolute;
}<div class="container">
<div class="scroll"></div>
<div class="fix"></div>
</div>이것은 쉽습니다(아래 HTML 참조).
이 방법은 요소(div)의 "위치: 고정"을 사용하지 않는 것입니다.이러한 요소를 지정하지 않으면 "고정 내용" 요소가 브라우저 창 대신에 "위치: 상대적" 요소(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>
위에서 세로 스크롤이 있는 디비에서 많은 텍스트의 상단에 닫는 "X" 버튼을 찾을 수 있었습니다.X는 제자리에 배치됩니다(스크롤된 텍스트로 이동하지는 않지만 사용자가 브라우저 창의 너비를 조정할 때 동봉된 div 컨테이너와 함께 왼쪽 또는 오른쪽으로 이동합니다!따라서 수직으로 "고정"되지만 주변 요소에 대해 수평으로 배치됩니다!
제가 이 작업을 하기 전에 텍스트 내용을 아래로 스크롤할 때 "X"가 위로 스크롤되어 보이지 않게 되었습니다.
내 자바스크립트 hideDiv() 기능을 제공하지 못해 미안하지만, 그것은 불필요하게 이 게시물을 더 길게 만들 것입니다.저는 가능한 한 짧게 하기로 결정했습니다.
/* 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%);
}
당신이 자바스크립트를 사용한다면 가능합니다.이 경우 jQuery 플러그인 Sticky-Kit:
변환을 사용하여 어떻게 작동하는지 설명하기 위해 jsfidle을 만들었습니다.
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/
제 프로젝트는 부트스트랩 4가 있는 .NET ASP Core 2 MVC Angular 4 템플릿입니다.첫 번째 행의 메인 앱 구성 요소 html(예: app.component.html)에 "스티키톱"을 추가하면 다음과 같이 작동했습니다.
<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:fixed하고 CSS를 .top/left/right/bottom창을 기준으로 요소를 배치합니다.
방법은 해결방다같다니습과를 하는 것입니다.margin 대신 top/left/right/bottom
마법은 화면 너비에서 용기 너비를 뺀 값을 2로 나누는 것입니다.
//1400px is according to container max-width (left can be also right)
.fixed {
position: fixed;
right: calc((100vw - 1400px)/2);
}
참고: css calc() 함수는 거의 모든 기능을 지원하지만 100% 지원하지는 않습니다.대부분의 사용 사례에서 충분히 지원됩니다.자세한 내용은 여기를 클릭하십시오.
스니펫(이 웹 사이트의 위젯에 딱 맞는 300px 컨테이너 포함):
.container {
max-width: 300px;
margin-left: auto;
margin-right: auto;
}
.fixed {
position: fixed;
right: calc((100vw - 300px)/2);
}
@media screen and (max-width: 300px) {
right: 0px;
}<div style="height: 3000px">
<div class="container">
<button class="fixed">
FIXED CONTENT
</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, eum? Animi quidem accusamus minima vel, dolorem suscipit quia accusantium minus harum modi commodi distinctio! Iste voluptatum earum quam voluptate culpa ad, ipsum dolorum recusandae quis atque eligendi necessitatibus magnam nisi dolores beatae qui? Perspiciatis natus cum nostrum in quod odio sapiente doloremque rerum quo dolore tenetur facere, quisquam atque accusamus fugiat eligendi, deleniti nisi minus recusandae distinctio dignissimos! Dicta quos ipsum qui pariatur at vel veritatis veniam quisquam minus modi et voluptas aliquam laborum, cumque in quo magnam sapiente. Expedita ut dolore laboriosam tempora reprehenderit vero eaque blanditiis, cumque voluptatibus, velit nemo, veniam tenetur quisquam numquam adipisci quae odio repellendus neque incidunt! Cum odio corporis soluta voluptate nesciunt, quasi nobis deleniti neque porro expedita fugiat placeat alias autem pariatur animi error, dicta veritatis atque perspiciatis inventore tempora dolor ad! Mollitia in dolorem ipsam eos porro magni perspiciatis possimus maiores, itaque facere ut. Eos culpa eum error quia incidunt repellendus quam possimus, asperiores earum ipsum molestias dicta sint fugit atque veniam dolorum illo? Officia harum sint incidunt totam, reiciendis illum eos maxime sequi neque repellat quis, expedita eum, corporis quaerat nemo qui soluta aspernatur animi. Sint ad rem numquam omnis sit.
</div>
</div>이 " 위치를 요청한, 는 "용기에 대한 고정 위치"를 선택했습니다.position:fixed, 내가페를스때위고남요있치정만었, 당신유효수있다니습얻을를과한사은지로 비슷한 를 얻을 수 .overflow특징.
아래의 스니펫에서 부모 컨테이너에 있을 때 제목이 고정되어 표시되는지 확인하지만 본문을 스크롤할 때 제목도 스크롤됩니다.
#grandpa{
width: 100vw;
height: 120vh;
background-color:rgb(236, 233, 233);
overflow:hidden;
}
#parent{
width: 200px;
height: 200px;
background-color:teal;
overflow:hidden;
}
#child1{
padding:1em
}
#child2{
height: 100px;
background-color:khaki;
overflow-y:scroll;
}<div id="grandpa">
<div id="parent">
<div id="child1">
heading
</div>
<div id="child2">
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
<p>body</p>
</div>
</div>
</div>저도 얼마 전에 그런 거 했어요.저는 자바스크립트에 익숙하지 않았기 때문에 당신이 더 잘 할 수 있을 것이라고 확신하지만, 여기 시작점이 있습니다.
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)
}
너비를 설정한 다음 창 너비를 가져오고 몇 초마다 여백을 변경해야 합니다.무겁다는 건 알지만 효과가 있습니다.
저는 이 질문에 답하는 것이 늦었지만 이것은 미래에도 존재할 공통적인 문제이며 미래의 검색자들에게 분명히 도움이 될 것이라고 확신합니다.
이것은 트릭을 적용하여 해결할 수 있습니다.우리는 사용할 수 있습니다.calc여기서. 계산에서 우리는 100개의 수직 폭을 사용하고 90%의 폭을 빼서 2로 나눌 수 있습니다.필요에 따라 90%를 변경하십시오.귀하의 경우 특정 요구사항에 따라 100% 또는 70%가 될 수 있습니다.
.your-class {
position: fixed;
right: calc((100vw - 90%)/2);
}
이것은 저에게 효과가 있었습니다.저의 경우 부동 요소를 오른쪽으로 이동할 수 있도록 했습니다.만약 당신이 그것을 왼쪽에 원한다면 사용하세요.left옳음 대신에
제 경험상, 이것을 다루는 가장 좋은 방법은 요소를 부모 요소에서 쫓아내는 것이었습니다.
position: sticky 스롤에고정않았때문저효없에다과었니습가는게크에지기되▁didn다.position:absolute문서 흐름에서 삭제했기 때문에 만족스럽지 못했습니다.
제가 간단히 한 것은 요소를 부모 요소와 동일한 수준에 두는 것입니다(그들이 형제자매가 되도록).그렇게 하면 요소 위에 고정되고 흐름에서 빠져나가지 않습니다.추가로 복잡한 CSS나 J가 필요하지 않습니다.
이 경우 상위 요소에 따라 고정 요소의 위치를 변경할 수 있습니다.
다음 코드를 사용하여 부모 요소의 위치를 얻을 수 있습니다.
function coordinatesSetter() {
var elm = $('parentElement');
var rect = elm.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return {top: rect.top + scrollTop, left: rect.left + scrollLeft});
}
언급URL : https://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container
'programing' 카테고리의 다른 글
| 이름/값 쌍이 있는 Excel 드롭다운 (0) | 2023.06.02 |
|---|---|
| alias 또는 alias_method를 사용해야 합니까? (0) | 2023.06.02 |
| 코드에서 UIButton에 대한 이미지 설정 (0) | 2023.06.02 |
| Eclipse 텍스트 커서가 변경되었으며 편집기가 다르게 작동함 (0) | 2023.06.02 |
| Active Directory에서 사용자 그룹을 가져오는 방법은 무엇입니까?(c#, asp.net ) (0) | 2023.06.02 |