position 질문드립니다. (그림 추가하였습니다 엉망이지만;;)
여신
■ 발생 환경 :
OS : 테스트 브라우저 : 비교 브라우저
(정상적으로 나오는 브라우저) :
■ 문제발생 URL (jsfiddle, jsbin. codepen 등 활용):
http://
■ 발생 문제에 대한 자세한 기술:
position에 대해 질문좀 드려요 ㅠ
제가 http://podopodstore.com/mycat/ 여기처럼 세로스크롤 페이지를 만들고잇는데요
오른쪽에 각스크롤페이지로 넘어가는 네비버튼을 position:fixed 로 고정시키는걸로 알고있는데
제가 만드는 페이지같은경우는
위의 페이지처럼 전체 100%페이지가아니라
body가 100%라면
제가 사용할 contents가 max-width 1300정도로 잡아두고 가운데 정렬로 구조를 잡아둔상태입니다.
이상황에서 브라우저 크기를 늘려 body를 만약 2000까지늘리고 contents는 1300일때
position:fixed;를 준 네비 버튼을 브라우저크기에 고정이아닌 1300px짜리 contents에 고정시킬수있는방법이 없을까요??ㅠㅠ
// 이미지 추가해서 질문하겟습니다 ㅠ
위 그림과같이 현재 네비버튼 위치가아니라빨간네모 박스 위치에 고정을 시키고 싶습니다 ㅠ
참고로 2000px이 브라우저를 늘렸을때 브라우저 크기이고
1300은 제가 짜놓은 contents부분입니다 contents 는 가운데 정렬이니 양쪽에 350px씩 여백이겟구요
현재 버튼이 있을때처럼 스크롤을 내릴때나 올릴때나 넓이를 늘리거나 줄일때 항상 화면에 고정을 시켜야하는데말이죠...
-
보물선
미디어쿼리사용하셨나요?
일단 fixed divabsolute div/div/div
이렇게 두번묶으셔서 첫번째 픽스할div에 width값주시고 위치는 가운데정렬
그다음에 앱솔루트할div에 위치값 적어주시면 될거같아요 -
권애교
구조가 1300이하로가면 contents사이즈가 600사이즈로 줄어듭니다 또 가운데 정렬에 양쪽여백이생기고 600이하에선 320사이즈로 줄여 양쪽여백이 생기는 형태입니다 ㅠ
-
늘빈
1300이하 화면에선 어떻게 되나요? 스크롤이 생기더래도 1300을 유지하나요?
-
유리
네비버튼의 width의 문제는 아니구요 ... 음.. 엉만인 그림이지만 추가하여 설명해놓았습니다 ㅠ
-
말근
네비버튼의 width가 문제인건가요? 그럼 네비버튼에도 width를..
-
큰모음
제말이 뽀수다님 밑에 답변이여 ㅋㅋ
-
큰솔
음...이해가 잘안되네요 ㅠ 제가 아직 초보라..ㅠ
-
거늘
그럼 fixed한 100%짜리 안에다가 contents영역처럼 가운데정렬해서 위치잡아주면 될꺼같은데요
-
튼튼
center 안에 넣엇어요... 근데 알아본결과 position fixed 는 body를 기준으로 움직인다고 들어서 center 안에있으나 밖에있으나 차이가없네요;;;
-
별햇님
네비버튼자체를 centers안에 넣으시면 되지않나요?ㅡㅡ;;;