부모 요소에 상대적인 고정 위치

저는 비교적 새로운 CSS입니다. 부모 요소 옆에있는 요소를 수정하려고 할 때 문제가 발생했습니다. 나는 다음과 같은 코드로 그렇게 할 수 있어요 :부모 요소에 상대적인 고정 위치

부모 요소 :

#search_results{ 
position:relative; 
}

자식 요소 : 브라우저 창 크기가 변경 될 때까지

.total { 
position: fixed; 
top:10px; 
width:250px; 
left: 75%; 
/*overflow: hidden;*/ 
margin-left: -125px; 
}

이 잘 작동합니다. 이 경우 고정 요소는 부모 요소와 겹칩니다. 내 문제를 여기에서 볼 수 있습니다 : Twittiment

페이지 상단과 부모 요소의 오른쪽에 자식 요소를 수정하려고합니다. 어떤 아이디어?

출처

2013-08-09 sh3nan1gans

CSS 사양에 따라 fixed에 위치한 요소는 뷰포트에 고정되며 포함 요소는 고정되어 있지 않습니다.

짧은 대답은 입니다. fixedposition 요소는 상위 요소와 관련이 없습니다. 대신 position: absolute;을 사용하고 jQuery/JS를 사용하여 실행시 topleftrightbottom 매개 변수를 조정할 수 있습니다.

출처

2013-08-09 20:17:38

구식 ...? – geotheory

-2

원하는 것은 position : absolute입니다. 그러면 부모 요소에 따라 자식 요소가 배치됩니다. 여기

일부 읽기 : 당신이 할 수 물론 http://www.w3schools.com/cssref/pr_class_position.asp

출처

2013-08-09 20:22:18

아니요, 그렇지 않습니다 ... 부모 요소에 따라 자식 요소가 배치됩니다. *** IF *** 부모 요소는'position : relative;'또는'position : absolute;'집합입니다. 그렇지 않으면 ''요소 자체 (즉, 화면의 가장 왼쪽 맨 위 모서리)와 관련됩니다. REFERENCE : http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ – VoidKing

사실, 나 자신을 조금만 고쳐 주겠다 : 그것은 가장 가까운 조상 요소에 따라 자식 요소를 배치한다. 'position : fixed;'또는'position : absolute;'이면,''요소와 관련이 있습니다. – VoidKing

, 그냥 별도의 사업부를 필요로한다!

<div class="fixed-wrapper"> 
    <div class="close-wrapper"> 
    <div class="close"></div> 
    </div> 
</div> 

body 
    background: gray 
    height: 8000px 

.fixed-wrapper 
    position: fixed 
    top: 20px 
    left: 0 
    right: 0 

.close-wrapper 
    max-width: 1200px 
    position: relative 

.close 
    background: #fff 
    width: 30px 
    height: 30px 
    position: absolute 
    right: 0 
    border: 1px solid #515151 
    &:before,&:after 
    width: 25px 
    height: 1px 
    background: #515151 
    content: '' 
    position: absolute 
    top: 50% 
    left: 50% 
    display: block 
    @include transform(translate(-50%, -50%) rotate(45deg)) 
    &:after 
    transform: translate(-50%, -50%) rotate(-45deg)

내가

http://codepen.io/marinagallardo/pen/mJyqaN

출처

2015-04-27 16:03:33 LaurieSpiegel

가장 좋은 방법 :-) 당신을 위해 만든이 바이올린 달성을 참조하십시오이 부모 요소를 변환 CSS를 제공하는 것입니다. 예 :

.relative{ 
    transform: translateX(0); // this will act like relative parent 
} 
.fixed{ 
    position: fixed; 
    left:0; 
    top:0; 
    width:100%; // width will be relative to the width of .relative 
}

출처

2017-11-26 10:51:32

부모 요소에 상대적인 고정 위치

답변

관련 문제