상단에 고정시킨메뉴 fixed 위에 이미지를 띄웠다 없앴다 하려하는데요..

상단에 고정시킨메뉴 fixed 위에 이미지를 띄웠다 없앴다 하려하는데요..

QA

상단에 고정시킨메뉴 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>   


 

thumb-2001156149_1690452868.7574_730x367.jpg

 

 

고정된 메뉴위에 이미지를 넣으려고하는것입니다.

아래사진보시면 고정메뉴 위에 배너가 있어야합니다.

그런데 배너를 클릭하면 배너가 사라지기때문에  top: 0px; 이걸로 조정하기가 어려워서

어떻게 다른방법이 있는건지 찾아보고 있습니다.

thumb-2001156149_1690453458.6295_730x118.jpg

해당 이미지의 위치를 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>

제가 원하는건 아래화면인데... 도움주신 소스는 자꾸 겹치는것같은데요..

2001156149_1690454530.8408.jpg

 

<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>   


 

답변을 작성하시기 전에 로그인 해주세요.
전체 9
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT