위치 절대 값 : 음수 값

너비가 100 %이고 높이가 100 % 인 네 개의 div 컨테이너가있는 페이지를 만들려고합니다. 중간에 div이라는 메인이 있고, 왼쪽, 오른쪽, 그리고 아래쪽에 하나가 있어야합니다. (예, jQuery 애니메이션을 위해 이런 위치에 있어야합니다.)위치 절대 값 : 음수 값

다음은 내 현재 코드 (그리고 여기있는 JSFiddle) : 나는 div의 아무 문제가 없었다

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="stylesheets/test.css"> 
</head> 
<body> 
    <div id="container1"></div> 
    <div id="container2"></div> 
    <div id="container3"></div> 
    <div id="container4"></div> 
</body> 
</html>

CSS

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    /*overflow: hidden;*/ 
} 

#container1 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: blue; 
} 

#container2 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: -100%; 
    background-color: red; 
} 

#container3 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 100%; 
    background-color: green; 
} 

#container4 { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 100%; 
    left: 0; 
    background-color: orange; 
}

HTML 그것들은 오른쪽과 아래에 있지만, 나는 그것을 얻을 수없는 것 같습니다. 왼쪽 작업.

는 또한 left: 100% 및 top: 0에서 주요 사업부와 왼쪽 left: 0에서 div 및 top: 0 위치를 시도했다, 그러나 나는 주 div (파란색 하나)보기로드 페이지를 얻는 방법의 확신입니다. 예를 들어 this JSFiddle입니다.

아이디어가 있으십니까?

출처

2013-10-25 MitulP91

당신이하고 싶은 것을 이해하기가 조금 어렵습니다. 이것은 올바르지 않습니다. http://jsfiddle.net/P2rjV/10/ – Cyclonecode

이 목적을 위해 Z- 색인을 사용하도록 제안합니다 !! 위치 속성을 지정하지 않아도됩니다 Z- 인덱스를 제공하고 jQuery 애니메이션에서 $ ("# ID")를 변경할 수 있습니다. css ({z-index : "maxvalue"}); –

@KristerAndersson 내가 불분명하면 사과드립니다. 나는 실제로 그 오렌지색 div가 파란색 div의 왼쪽에 있도록하고 싶다. 게시 된 두 번째 바이올린에서이 작업을 수행했지만 페이지가 파란색 div에로드되기를 원합니다. – MitulP91

당신이 도전하는 것은 요소 배치에 관한 것이 아닙니다.로드 할 때 레이아웃의 수평 중심으로 이미 페이지를 스크롤해야한다는 사실에 관한 것입니다. 이것은 자바 스크립트를 통해서만 가능합니다. Here's a great q/a on this with a working fiddle.

업데이트 : 위 링크에서 기술 및 스크립트로 업데이트 한 코드는 다음과 같습니다. View it on Codepen.

출처

2013-10-25 03:35:18

정말 고마워요. 그걸 봤어야 했어. 코드 편집에 감사드립니다. – MitulP91

실 거예요 정확하고 쉬운 방법은 페이지가 를로드 또는 다른 모든 div의를 가지고 더 큰 콘텐츠 사업부를 만들 때 중앙 DIV에 초점을 자바 스크립트를 사용하여 변경하는 것입니다 그런 식으로 일을 따라 위치입니다 당신이 보여주고 싶은 사업부에 [당신이 왼쪽 속성에 페이지 폭을 추가하여 오른쪽으로 스크롤 할 수 있습니다]

출처

2013-10-25 03:40:12 ManZzup

위치 절대 값 : 음수 값

답변

관련 문제