내 사이트에 스크롤 섹션이있는 섹션과 그 옆에 움직이지 않는 섹션을 만들려고합니다. 내 코드는 다음과 같습니다.
<div class="wrapper">
<div id="feed">
</div>
<div class="right_wrapper">
<div class = "top_right_wrapper";>
<div class = "top_right_title_wrapper">
<div class="top_right_title">
Title
</div>
</div>
</div>
<div class = "mid_right_wrapper";>
</div>
</div>
CSS :
div.wrapper{
width: 1110px;
margin: auto;
}
div.right_wrapper{
height: 100%;
width: 300px;
float:right;
position:fixed;
}
div.top_right_wrapper{
height: 150px;
width: 300px;
background-color: white;
box-shadow: 0px 1px 2px #888888;
float:right;
}
div.mid_right_wrapper{
height: 300px;
width: 300px;
margin-top: 3px;
background-color: white;
box-shadow: 0px 1px 2px #888888;
float:right;
}
div.top_right_title_wrapper{
height: 40px;
width: 150px;
padding:0;
}
div.top_right_title{
font-family: "Open Sans";
font-weight: bold;
padding: 8px;
color: #2F4F4F;
}
feed
ajax 호출에서 다른 div를 얻는 ID 가 있습니다. 무한 스크롤 형 피드입니다. 나는 또한 top_right_wrapper
오른쪽 상단에 바로 옆에 있어야합니다. 다음과 같아야합니다.
------------- ****
------------- ****
------------- ****
-------------
-------------
-------------
스크롤은 --
이고 top_right_wrapper는 **
. 내 현재 코드가 고정 위치로이 작업을 수행 할 때 :
****---------
****---------
****---------
-------------
-------------
-------------
고정 된 위치를 떼어 내면 모든 데이터가 끝나고 이렇게 페이지 맨 아래로 이동합니다. 올바른 위치에서 깜박 인 다음 하단으로 사라집니다.
-------------
-------------
-------------
------------- ****
------------- ****
------------- ****
누구든지 이것을 해결하는 방법을 알고 있습니까?
문제는 당신이에 float: right;
AND를 선언하고 있다는 것 position:fixed;
입니다 div.right_wrapper
. 설명하는 레이아웃 문제는 완전히 의미가 있습니다.
먼저 CSS 절대 및 고정 위치에 대한 배경 정보 :
실제로 하나의 스태킹 컨텍스트에 7 개 이상의 레이어가있을 수 있고 해당 레이어에는 여러 요소가있을 수 있지만 걱정하지 마십시오. 스태킹 컨텍스트에서 7 개의 레이어를 처리 할 필요가 없습니다. 하나의 스태킹 컨텍스트 내에서 요소 (위치 지정된 요소뿐만 아니라 모든 요소)가 렌더링되는 순서는 뒤에서 앞으로 다음과 같습니다.
- 스택 컨텍스트를 구성하는 요소의 배경 및 테두리
- 스택 레벨이 음수 인 위치 지정된 하위 항목
- 일반 흐름의 블록 수준 하위 항목
- 떠 다니는 자손
- 일반 흐름의 인라인 수준 하위 항목
- 스택 레벨이 자동 또는 (0)으로 설정된 위치가 지정된 하위 항목
- 포지티브 스택 레벨로 배치 된 하위 항목
강조 표시된 항목은 z-index 속성을 사용하여 스택 수준을 변경할 수있는 요소입니다.
( http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning 에서 발췌 )
이러한 문제가 발생하는 이유는 물체에 고정 된 위치를 할당하기 때문입니다. 이것은 정상적인 개체 흐름에서 벗어납니다. 고정 된 위치를 제거하면 float: right
선언 만 남겨져 기본 열의 오른쪽에 배치됩니다.
대신 float: right
,와 같은 선언을 사용하여 항목을 배치합니다 right: 0;
.
내가 말하는 것을 설명하기 위해 아래에 예가 있습니다.
#wrapper {
position: relative;
width: 90% margin: 1em auto;
/* Background color to help illustrate areas*/
background-color: red;
}
#content {
position: relative;
width: 70%;
padding: 1em;
background-color: white;
}
#menu {
position: fixed;
padding: 10px;
top: 30px;
left: calc(70% + 30px);
background-color: white;
}
<div id="wrapper">
<div id="content">
<h1><span class="mw-headline" id="The_third_dimension.E2.80.94z-index">The third dimension—z-index</span></h1>
<p>It’s natural to regard a web page as two-dimensional. Technology hasn’t evolved far enough that 3D displays are commonplace, so we have to be content with width and height and fake 3D effects. But CSS rendering actually happens in three dimensions!
That doesn’t mean you can make an element hover in front of the monitor—yet—but you can do some other useful things with positioned elements.
</p>
<p>The two main axes in a web page are the horizontal X axis and the vertical Y axis. The origin of this co-ordinate system is in the upper left-hand corner of the viewport, ie where both the X and Y values are 0. But there is also a Z axis, which we
can imagine as running perpendicular to the monitor’s surface (or to the paper, when printing). Higher Z values indicate a position “in front of” lower Z values. Z values can also be negative, which indicate a position “behind” some point of reference
(I’ll explain this point of reference in a minute).
</p>
<p>Before we continue, I should warn you that this is one of the most complicated topics within CSS, so don’t get disheartened if you don't understand it on your first read.
</p>
<p>Positioned elements (including relatively positioned elements) are rendered within something known as a stacking context. Elements within a stacking context have the same point of reference along the Z axis. I’ll explain more about this below. You
can change the Z position (also called the stack level) of a positioned element using the <code>z-index</code> property. The value can be an integer number (which may be negative) or one of the keywords <code>auto</code> or <code>inherit</code>. The
default value is <code>auto</code>, which means the element has the same stack level as its parent.
</p>
<p>You should note that you can only specify an <i>index</i> position along the Z axis. You can’t make one element appear 19 pixels behind or 5 centimetres in front of another. Think of it like a deck of cards: you can stack the cards and decide that the
ace of spades should be on top of the three of diamonds—each card has its stack level, or Z index.
</p>
<p>If you specify the <code>z-index</code> as a positive integer, you assign it a stack level “in front of” other elements within the same stacking context that have a lower stack level. A <code>z-index</code> of 0 (zero) means the same as <code>auto</code>,
but there is a difference to which I will come back in a minute. A negative integer value for <code>z-index</code> assigns a stack level “behind” the parent’s stack level.
</p>
<p>When two elements in the same stacking context have the same stack level, the one that occurs later in the source code will appear on top of its preceding siblings.
</p>
<p>There can in fact be no less than seven layers in one stacking context, and any number of elements in those layers, but don't worry—you are unlikely to have to deal with seven layers in a stacking context. The order in which the elements (all elements,
not only the positioned ones) within one stacking context are rendered, from back to front is as follows:
</p>
<ol>
<li>The background and borders of the elements that form the stacking context
</li>
<li> <b>Positioned descendants with negative stack levels</b>
</li>
<li>Block-level descendants in the normal flow
</li>
<li>Floated descendants
</li>
<li>Inline-level descendants in the normal flow
</li>
<li> <b>Positioned descendants with the stack level set as <code>auto</code> or (zero)</b>
</li>
<li> <b>Positioned descendants with positive stack levels</b>
</li>
</ol>
<p>The highlighted entries are the elements whose stack level we can change using the <code>z-index</code> property.
</p>
</div>
<div id="menu">
<h3>This is a fixed menu.</h3>
<ul>
<li><a href="#">Link 1</a>
</li>
<li><a href="#">Link 2</a>
</li>
<li><a href="#">Link 3</a>
</li>
<li><a href="#">Link 4</a>
</li>
<li><a href="#">Link 5</a>
</li>
</ul>
</div>
</div>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다