입력 요소가 겹치는 탐색 버튼 (검색 버튼과 확인란)

Question

현재이 문제에 착수 중입니다. 확인란 (라벨)과 검색 버튼 (입력)과 같은 요소는 항상 내 탐색 위에 쌓여 있습니다.

불투명도, 위치, z- 인덱스 (정적이 아닌 위치 포함), 테두리 배경 제거 ...와 같이 많이 시도했지만 성공하지는 못했습니다.

opacity: 1; 
    position: absolute; 
    z-index: 9998; 

Answer 1

위치로 확인하시기 바랍니다. CSS

사람들을 위해

Answer 2

.search input { 
 
    border: 2px solid #ccc; 
 
    border-radius: 20px; 
 
    box-sizing: border-box; 
 
    font-family: "FontAwesome"; 
 
    font-size: 16px; 
 
    padding: 12px 20px; 
 
    position: relative; 
 
    transition: width 0.4s ease-in-out 0s; 
 
    width: 100%; 
 
    z-index: 9999; 
 
}

Answer 3

나 같은 같은 문제에서 실행 느릅 나무. 내 nav 컨테이너가 position: static으로 설정 되었기 때문입니다!
position: relative으로 변경 했으므로 이제는 잘 작동합니다!