-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
logo와 video의 html 순서 문제
24.02.20 19:48 작성 조회수 69
0
안녕하세요, 강의 영상에서 페이지의 요소들을 모두 position 속성을 이용해 배치할거라 html 태그의 순서는 상관없다고 하셔서 시험삼아 logo 요소를 video 요소의 앞에 배치시켜봤습니다.
그랬더니 아래 화면처럼 logo 요소가 video의 위에 위치하고 z-index를 주거나 배경색을 transparent로 설정해도 바뀌지 않더라고요.
로고가 비디오 위에 오는건 html 태그의 순서의 영향이 있는거 같은데, 그러면 실제 웹사이트를 만들때도 html 태그들의 순서를 고려해서 배치해야 하나요?
사용한 html와 css 스크립트는 댓글에 첨부했습니다
답변을 작성해보세요.
0
hyoseok BANG
질문자2024.02.20
CSS
/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
@import url('http://fonts.googleapis.com/css?family=Monoton');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
body {
margin: 0;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 300;
}
a {
text-decoration: none;
}
/* BG Video */
.video-frame {}
.video-frame video {
position: fixed;
min-width: 100%;
min-height: 100%;
}
.logo {
border: 5px solid red;
background-color: transparent;
color: transparent;
z-index: -1;
}0
hyoseok BANG
질문자2024.02.20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style2.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="">
</div>
<div class="video-frame">
<video src="images/video-female.mp4" autoplay muted loop poster="images/placeholder-female.jpg"></video>
</div>
</div>
</body>
</html>
답변 2