절대 위치로 설정하면 요소가 사라 집니까?

단순한 프로젝트이지만 초보자가 프로그래밍에 어려움을 겪고 있습니다. 나는 그림을 바꾸기 위해 슬라이더를 만들기 위해 두 개의 버튼을 설정하려고합니다. 내 문제는 버튼을 포함하는 div에서 position 속성을 absolute로 설정하면 버튼이 포함 된 div 요소가 사라진다는 것입니다.절대 위치로 설정하면 요소가 사라 집니까?

그래서이 상대적으로 설정된 위치에 내 페이지의 스크린 샷입니다 :

.buttons { 
      cursor: pointer; 
      position: relative; 
}

하고 절대로 설정하여이는 다음과 같습니다

.buttons { 
      cursor: pointer; 
      position: absolute; 
}

코드는 다음과 같습니다

012 3,516,

HTML

<!DOCTYPE html> 
<html lang="en-US"> 

    <head> 

     <meta charset="UTF-8"> 

     <title>Photography</title> 

     <link rel="stylesheet" type="text/css" href="styles.css"> 
    <script type="text/javascript" src="jquery-3.1.0.min.js"></script> 
     <script type="text/javascript" src="JavaScript2b.js"></script> 
     <script type="text/javascript" src="JavaScript2.js"></script> 


    </head> 

    <body> 

    <div id="header"> 
    </div> 

     <div id="container"> 

     <div id="imagewrap"> 
      <img src="Images/01Folder/Image.jpg" height="500px" id="front" /> 

      <div id="previous" class="buttons" onclick="change(-1);"> 
      </div> 

      <div id="next" class="buttons" onclick="change(1);"> 
      </div> 
     </div> 

     </div> 


    <div id="footer"> 
    </div> 

    </body> 

    <script type="text/javascript" src="JavaScript2.js"></script> 

</html>

CSS

html, body { 
      margin: 0px; 
      padding: 0px; 
      height: 100vh; 
    } 

#header { 
    position: relative; 
    height: 10%; 
    width: 100%; 
    background-color: lightgray; 
} 

#footer { 
    position: relative; 
    height: 10%; 
    width: 100%; 
    background-color: lightgray; 
    display: block; 
} 

#container { 
    height: 80%; 
    width: 100vw; 
    background-color: white; 
    min-height: 580px; 
    text-align: center; 
} 

#imagewrap{ 
    position: relative; 
    border: 1px solid #818181; 
    overflow: hidden; 
    z-index: 5; 
    display: inline-block; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.buttons { 
      cursor: pointer; 
      position: relative; 
} 

#previous { 
      background-image: url(Images/carremoins.png); 
      background-repeat: no-repeat; 
      background-position: center center; 
      width: 20px; 
      height: 20px; 
     } 

#next { 
      background-image: url(Images/carreplus.png); 
      background-repeat: no-repeat; 
      width: 20px; 
      height: 20px; 
      background-position: center center; 
}

그럴 아래에, 그림에있을 버튼을 싶지만, 그들이 사라지는 이유를 이해할 수 없다. 어떤 도움을 주셔서 감사합니다.

출처

2017-02-27 Paul

일부 오프셋을 추가하십시오. 'left : 0;'과'top : 0;'값을 절대 요소에 적용합니다. – Stickers

헤이 @ 폴, 이걸 가진 행운? 결국 Z- 인덱스의 경우였습니까? –

해결책은 Pangloss와 같은 일부 오프셋을 추가하는 것이 었습니다. 나는 비록 왜 그래도 모르겠다. – Paul

버튼의 z- 색인을 이미지의 색인보다 큰 값으로 설정해보십시오 (5).

.buttons { 
    cursor: pointer; 
    position: relative; 
    z-index: 10; 
}

출처

2017-02-27 18:37:46

이것으로 무슨 뜻입니까, @ata? –

절대 위치로 설정하면 요소가 사라 집니까?

답변

관련 문제