CSS의 콘텐츠

내 데모 사이트에 <button class="modal-close"></button>을 사용하고 있습니다.

왼쪽 상단에 "X"(닫기)를 배치하고 싶습니다.

.modal-close { 
 
    position: absolute; 
 
    z-index: 9999; 
 
    overflow: hidden; 
 
    top: 28px; 
 
    left: 28px; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 40px; 
 
    line-height: 1; 
 
    width: 0.75em; 
 
    height: 0.75em; 
 
    cursor: pointer; 
 
    background: none; 
 
    border: 0; 
 
    color: #888888; 
 
} 
 

 
.modal-close::after { 
 
    content: "X"; 
 
} 
 

 
.modal-close::after { 
 
    position: absolute; 
 
    top: -0.025em; 
 
    left: -0.1em; 
 
    padding: 0 
 
} 
 

 
.flexbox { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    /* establish flex container */ 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    /* make main-axis vertical */ 
 
    -webkit-box-pack: center; 
 
    -ms-flex-pack: center; 
 
    justify-content: center; 
 
    /* align items vertically, in this case */ 
 
    -webkit-box-align: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    /* align items horizontally, in this case */ 
 
    height: 100%; 
 
    /* for demo purposes */ 
 
    width: 100%; 
 
} 
 

 
#Kurzfilm video { 
 
    margin: 0 auto; 
 
    display: inline-block; 
 
    position: absolute; 
 
} 
 

 
#Kurzfilm .overlay { 
 
    background-color: #ffffff; 
 
    opacity: 1; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 80; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#Kurzfilm video, 
 
#modal .window { 
 
    z-index: 90; 
 
} 
 

 
#Kurzfilm { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 90; 
 
} 
 

 
body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: Arial; 
 
    font-size: 1vw; 
 
    font-weight: normal; 
 
    color: #000000; 
 
}

<div id="Kurzfilm"> 
 
    <button class="modal-close"></button> 
 
    <div class="overlay"></div> 
 
    <div class="flexbox"> 
 
    <video width="320" height="240"> 
 
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4"> 
 
    Your browser does not support the video tag. 
 
    </video> 
 
    </div> 
 
</div>

출처

2017-10-25 DavidDunham

흠 업데이트 한은'top'과':: after'의'left' 속성을 조정? –

'X'는 절대 위치를 가지고 상대 부모와 고정 너비가 필요합니다. 특정 너비로 상대 div로 이미지를 감싸야합니다. – Pedram

@pedram 절대적으로 위치하는 자식에 대한 부모는 모든 종류의 위치 지정을 가질 수 있습니다. 상대적인. –

보십시오이

.modal-close::after { 
    position: absolute; 
    top: -0.1em; 
    left: 0.03em; 
    padding: 0; 
}

출처

2017-10-25 06:23:40

.modal-close::after { 
    position: absolute; 
    top: 0em; 
    left: 0em; 
    padding: 0 
}

이 위쪽 및 왼쪽 = 0em을 확인 변경이 절대 코너

또는

에 나타납니다 0

.modal-close { 
    position: absolute; 
    z-index: 9999; 
    overflow-x: visible; 
    top: 28px; 
    left: 28px; 
    margin: 0; 
    padding: 0; 
    font-size: 40px; 
    line-height: 1; 
    width: 0.75em; 
    height: 0.75em; 
    cursor: pointer; 
    background: none; 
    border: 0; 
    color: #888888; 
}

는 X에게 포경을 볼 수와 오버 플로우-X를 확인

출처

2017-10-25 07:02:37

간단합니다 :

클래스 :: .modal 닫기의 글꼴 크기를 부여

.modal-close::after { 
content: "X"; 
font-size: 18px;

후 }

는 왼쪽으로 이동

.modal-close::after { 
position: absolute; 
top: -0.025em; 
left: 0.9em; 
padding: 0;

}

나는 jsfiddle

출처

2017-10-25 11:53:34

CSS의 콘텐츠

답변

관련 문제