이미지를 CSS와 HTML로 서로 위치 시키십시오.

여기에있는 문제를 해결하려고 노력하고 있습니다. 기본적으로 배경이있는 웹 사이트가 있습니다. 이 배경의 Ontop에는 중심 이미지가 있습니다.이 이미지를 호출 할 수 있습니다 1. 정확히 image1 위에 나는 image2를 그려보고 싶다. 그래서 기본적으로 저는 두개의 중심 이미지를 뽑아 내고자하는 배경을 가지고 있습니다. 나는 그들을 중심으로 이미지와 오버레이 이미지라고 부른다.이미지를 CSS와 HTML로 서로 위치 시키십시오.

도움 주셔서 감사합니다. -이 경우에 .centeredImage을

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<style type="text/css" media=screen> 

body{ 
    background-color:#f1e6d0; 
    background-image:url('backgroundPattern.jpg'); 
} 
.containerPage 
{ 
    position:relative; 
    display: block; 
    width:1024; 
    height:1515; 
    margin-top:50px; 
    margin-left:auto; 
    margin-right:auto;  
} 
.overlayImage1 
{ 
    position:absolute; 
    left:0px; 
    top: 0px; 
    z-index: 1; 
} 
.overlayImage2 
{ 
    position:absolute; 
    left:0px; 
    top: 0px; 
    z-index: 2; 
} 

</style> 

<title>A dream within a dream</title> 
</head> 
<body> 


<!-- PAGE BEGINS --> 
<div class= "containerPage"> 

    <!-- BACKGROUND IMAGE --> 
    <img class="overlayImage1" src="column.gif" unselectable="on" height="1515" width="1024"/> 
    <img class="overlayImage2" src="webSite_split_page1.gif" height="1515" width="1024"/> 
    <!-- CONTENT BEGINS --> 
    <!-- LEFT SIDE --> 

</div> 

</body> 
</html>

출처

2012-01-29 Lukas Arvidsson

나는 당신이 지금 무엇을보고 있습니다. 이 시도. 올바른 수직 정렬을 얻으려면 top 값을 조정해야합니다. 가능한 한마디로 말하는 것을 kinakuta

body{ 
    background-color:#f1e6d0; 
    background-image:url('backgroundPattern.jpg'); 
} 
.containerPage 
{ 
    position:relative; 
    display: block; 
    width:1024; 
    margin-top:50px; 
    margin-left:auto; 
    margin-right:auto; 

} 

.centeredImage { display: block; margin: 0 auto; } 

.overlayImage { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 300px; 
    height: 300px; 
    margin-top: -150px; /* Half the height */ 
    margin-left: -150px; /* Half the width */ 
}

출처

2012-01-29 06:13:00 mrtsherman

잘 작동하는 것 같습니다! 고맙습니다! –

Btw, 누구나 왜 오버레이 이미지에 50 %가 사용되는지에 대한 좋은 설명이 있습니까? 그 뒤에있는 논리는 무엇입니까? –

이미지의 왼쪽 가장자리를 가운데에 맞 춥니 다. 그런 다음 너비의 절반만큼의 음수 여백을 사용하여 센터링을 완료합니다 – mrtsherman

당신이에 Z- 인덱스를 제공하기 위해 원하는 무엇이든에 위치 값을 보내기 안부,

루카스

여기에 지금까지 내 코드입니다.

출처

2012-01-29 05:46:50 kinakuta

http://jsfiddle.net/frV3D/

고정 한 요소의 절대 또는 상대 위치에서만 동작하는지 Z- 색인이다. centeredimage가 이들 중 어느 것도 가지지 않기 때문에 z-index 속성은 아무 것도하지 않습니다. – mrtsherman

답변 해 주셔서 감사합니다. 위에 게시 한 코드에서 centeredImage는 페이지의 가운데에 있습니다. 어떤 이유로 오버레이 이미지가 왼쪽에 고정되어 있기 때문에 문제가있는 오버레이 이미지입니다. 나는 position을 추가하려고 시도했다 : centeredImage에 상대적으로, overlayImage가없는 동안 여전히 중심에있다. position을 추가하면 절대적이다. 그것은 또한 overlayImage와 마찬가지로 왼쪽에 붙어있다. 나는이 문제에 대해 정말로 머리를 감쌀 수 없다. 내게 논리적 인 것은 containerPage div 내에서 영역을 정의하는 것이고 그 다음에 오는 모든 요소는 참조로서 ... –

절대 위치 지정이 있으므로 왼쪽으로 고정됩니다. 어떻게 접근 할 것인가는 상대 위치 지정을 제공하는 div의 두 이미지 자식 요소를 만드는 것입니다. 중심을 div로 지정한 다음 이미지에 절대 위치 지정과 적절한 z- 색인을 지정합니다. – kinakuta

이미지를 CSS와 HTML로 서로 위치 시키십시오.

답변

관련 문제