상단에 고정시킨메뉴 fixed 위에 이미지를 띄웠다 없앴다 하려하는데요..
본문
상단메뉴가 고정되어있는데요
고정된 메뉴위에 이미지가 같이 fixed 되어있따가 이미지를 클릭시 이미지를 삭제하려고하는데요..
이렇게 저렇게 하고 잇는데 다 안됩니다..ㅜㅜ 팁같은게 있나요??
목적은 모바일로 접속시에 앱이 아니면 앱으로 이동하라는 이미지를 넣으려고합니다.
현재 만지고 있는 소스는 아래와같습니다
<style>
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
h1, p {
margin: 0;
}
main {
padding: 1rem;
height: 100%;
}
body {
background: #EEE;
}
body, html {
height: 200%;
}
* {
box-sizing: border-box;
}
</style>
<div id="view" style="position: fixed;z-index: 2;">
<a href="#" onclick='view_close()'><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>
</div>
<script>
function view_close() {
const div = document.getElementById('view');
div.remove();
}
</script>
<header>
<h1>고정메뉴</h1>
<nav>
<span>Menu1</span>
<span>Menu2</span>
<span>Menu3</span>
</nav>
</header>
<main>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
</main>
답변 4
다음과 같이 해보시는건 어떨까 합니다.
이미지가 클릭되었을 때 해당 함수를 호출하도록 onclick 속성을 이미지 태그에 추가하고 이미 작성된 JavaScript 함수 view_close()를 사용하여 이미지를 삭제하도록 하시면 될것 같습니다.
<style>
header {
/* ... (기존 스타일 코드) ... */
}
/* ... (기존 스타일 코드) ... */
</style>
<div id="view" style="position: fixed; z-index: 2;">
<a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>
</div>
<script>
function view_close() {
const viewDiv = document.getElementById('view');
viewDiv.style.display = 'none';
}
</script>
<header>
<!-- ... (기존 헤더 코드) ... -->
</header>
<main>
<!-- ... (기존 메인 내용 코드) ... -->
</main>
이미지가 뜨고 없어지는건 잘됩니다...
이미지가 고정메뉴 위에 띄워야 하는데 그게 안되고이는것입니다..
이미지의 z-index를 고정 메뉴의 z-index보다 더 크게 설정하여 층위를 조정. 그리고 이미지가 고정되도록 position: fixed 속성을 사용하시면 될 듯 합니다.
참고하셔서 원하시는 형태로 수정하시면 되겠습니다.
<style>
header {
/* ... (기존 스타일 코드) ... */
}
/* ... (기존 스타일 코드) ... */
/* 추가 스타일 */
#view img {
position: fixed;
top: 100px; /* 이미지가 고정 메뉴 아래에 위치하도록 조정 */
left: 50%;
transform: translateX(-50%);
z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
display: none; /* 이미지를 기본적으로 숨김 */
}
</style>
<div id="view">
<a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>
</div>
<script>
function view_close() {
const viewDiv = document.getElementById('view');
viewDiv.style.display = 'none';
}
</script>
<header>
<!-- ... (기존 헤더 코드) ... -->
</header>
<main>
<!-- ... (기존 메인 내용 코드) ... -->
</main>
말씀해주신대로 넣었는데.. 아래처럼나오는데요...
<style>
header {
position: fixed;
top: 200;
left: 0;
right: 0;
z-index: 1;
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}
h1, p {
margin: 0;
}
main {
padding: 1rem;
height: 100%;
}
body {
background: #EEE;
}
body, html {
height: 200%;
}
* {
box-sizing: border-box;
}
/* ... (기존 스타일 코드) ... */
/* 추가 스타일 */
#view img {
position: fixed;
top: 100px; /* 이미지가 고정 메뉴 아래에 위치하도록 조정 */
left: 50%;
transform: translateX(-50%);
z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
}
</style>
<div id="view">
<a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg"></a>
</div>
<script>
function view_close() {
const viewDiv = document.getElementById('view');
viewDiv.style.display = 'none';
}
</script>
<header>
<h1>고정메뉴</h1>
<nav>
<span>Menu1</span>
<span>Menu2</span>
<span>Menu3</span>
</nav>
</header>
<main>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
</main>
고정메뉴위에 이미지를 출력되야 한다고 하신거 아니신가요?
제가 이해를 잘 못 한건가요?
고정된 메뉴위에 이미지를 넣으려고하는것입니다.
아래사진보시면 고정메뉴 위에 배너가 있어야합니다.
그런데 배너를 클릭하면 배너가 사라지기때문에 top: 0px; 이걸로 조정하기가 어려워서
어떻게 다른방법이 있는건지 찾아보고 있습니다.
해당 이미지의 위치를 header 요소 안으로 이동시키고, position: absolute 속성을 사용하여 고정 메뉴 기준으로 위치를 조정하면 될 것 같습니다.
position: absolute는 가장 가까운 position: relative를 가진 요소를 기준으로 위치가 결정되기 때문에, header에 position: relative 속성을 추가하여 그 안에 있는 이미지를 조정할 수 있습니다.
<style>
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* 추가 */
}
/* ... (기존 스타일 코드) ... */
/* 추가 스타일 */
#view img {
position: absolute;
top: 50%; /* 이미지를 수직 가운데로 위치시킴 */
left: 50%; /* 이미지를 수평 가운데로 위치시킴 */
transform: translate(-50%, -50%); /* 이미지의 중심을 기준으로 정렬 */
z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
display: none; /* 이미지를 기본적으로 숨김 */
}
</style>
제가 원하는건 아래화면인데... 도움주신 소스는 자꾸 겹치는것같은데요..
<style>
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1;
height: 75px;
padding: 1rem;
color: white;
background: teal;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* 추가 */
}
/* ... (기존 스타일 코드) ... */
/* 추가 스타일 */
#view img {
position: absolute;
top: 50%; /* 이미지를 수직 가운데로 위치시킴 */
left: 50%; /* 이미지를 수평 가운데로 위치시킴 */
transform: translate(-50%, -50%); /* 이미지의 중심을 기준으로 정렬 */
z-index: 9999; /* 고정 메뉴의 z-index보다 큰 값으로 설정 */
}
</style>
<script>
function view_close() {
const viewDiv = document.getElementById('view');
viewDiv.style.display = 'none';
}
</script>
<header>
<div id="view">
<a href="#" onclick="view_close()"><img src="https://ssl.pstatic.net/melona/libs/1458/1458425/a5d397a418a69bf298e1_20230724171307474_1.jpg" width="100%"></a>
</div>
<h1>고정메뉴</h1>
<nav>
<span>Menu1</span>
<span>Menu2</span>
<span>Menu3</span>
</nav>
</header>
<main>
<p style="height:3000px">This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
<p>This is the main area.</p>
</main>
