화면 크기에 관계없이 div를 동일한 위치에 표시하기

Question

Google 소재 디자인 (예 : 카드 사용량이 많음)에 기반한 클라이언트 용 웹 사이트를 개발 중입니다.

내가 원하는 것은 아래 이미지와 같이 플로팅 액션 버튼의 중간 지점에서 화면의 첫 번째 카드가 끊임없이 엿보기로 표시되도록하는 것입니다.

내 문제는 사이트가 화면 해상도와 다른 장치에서 볼되고있을 때이 잘 작동하지 않는다는 것입니다. 백분율을 사용하여 시도해 보았지만 정상에서이 카드를 쌓아 올렸지 만 실패하고 카드 위치가 바뀝니다. 나머지 옵션은 미디어 쿼리를 사용하는 것입니다. 그러나 이것은 잠재적으로 복잡한 것으로 입증 될 것입니다. 그것이 현재 존재하는 다음

카드에 대한 CSS입니다 : 내가 원하는 효과를 얻을 수있는 방법에

#content-card 
{ 
    position: relative; 
    display: table; 
    background-color: white; 
    top: 0; 
    left: 0; 
    right: 0;  
    width: 100%; 
    overflow: hidden; 
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); 
    z-index: 2; 
    height: auto; 
} 

어떤 조언과 통찰력을 환영합니다. 요청에 따라

감사합니다 :)

기본 jfiddle 구현 : - https://jsfiddle.net/7fudv084/1/

Answer 1

사용 폭스 바겐 (뷰포트 폭) 대신 백분율. 1vw = 뷰포트 너비의 1/100 - 장치 PPI 등에 관계 없음 따라서 장치 크기와 해상도에 상관없이 div가 비례 고정 된 상태로 유지되도록하려면 가로 축 위치를 VW로 설정하십시오.

예 :

.somediv{ margin-right:20vw}