CSS calc（）; divを配置する

Question

私は幅と高さがビュー幅の37％のdivを作成しようとしています。

divを中央に配置して、ビューの幅の50％をとり、37％の値を差し引いてみました。

私はdivを親divの外側に50％座っておきたいと思います。それは基本的にプロファイル画像を持つカバー写真です。ビジネスビューのラッパーの外側にビジネスカバーロゴを表示させるには、下位のポジションを負にする必要があります。唯一の考え方は、負の数で乗算された方法です。

希望はこれが理にかなっています。どんな助けもありがとう。

ありがとうございました。

<div class="business-view-cover"> 
    <div class="business-cover-logo"></div> 
</div> 

.business-view-cover { 
    position: relative; 
    height: calc(100vw * 0.5625); 
    background-size: cover; 
    background-position: center center; 
    background-image: url('../images/business-cover-1.png'); 

    .business-cover-logo { 
     position: absolute; 
     --width-profile: calc(100vw * 0.37); 
     --half-width: calc(var(--width-profile)/2); 
     --profile-bottom: calc(-1 * var(--half-width)); 
     bottom: calc(var(--profile-bottom) * -1); 
     left: calc(50vw - var(--width-profile)); 
     width: var(--width-profile); 
     height: var(--width-profile); 
     border: 4px solid $e1-background-grey; 
     border-radius: 1.6rem; 
     background-size: cover; 
     background-position: center center; 
     background-image: url('../images/logo-cover-napa.png'); 
    } 
} 

固定値で動作する例です。

.business-view-cover { 
    position: relative; 
    height: calc(100vw * 0.5625); 
    background-size: cover; 
    background-position: center center; 
    background-image: url('../images/business-cover-1.png'); 

    .business-cover-logo { 
     position: absolute; 
     bottom: -7.65rem; 
     left: calc(50vw - 7.65rem); 
     width: 15.3rem; 
     height: 15.3rem; 
     border: 4px solid $e1-background-grey; 
     border-radius: 1.6rem; 
     background-size: cover; 
     background-position: center center; 
     background-image: url('../images/logo-cover-napa.png'); 
    } 
} 

Answer 1

私はあなたが必要なものを理解した私の答えを編集した：、あなたのロゴを配置position: relativeを使用し、負の値にbottomを設定するには、ロゴを中央にするために100pxは、ロゴの半分ですleft: calc(50% - 100px)を使用サイズ。また、CSSには、ネストクラスが存在しない、あなたは.business-cover-logo

括弧の外に移動する必要があります

HTML

<div class="cover-photo"> 
    <div class="logo"> 
    </div> 
</div> 

CSS

.cover-photo{ 
    width: 100%; 
    margin: auto; 
    border: 1px solid black; 
    text-align: center; 
} 

.logo{ 
    background-color: navy; 
    width: 200px; 
    height: 200px; 
    position:relative; 
    bottom: -100px; 
    left: calc(50% - 100px); 
} 

Example