Div가 절대 위치로 설정되어 다른 div가 아래로 밀려 나오지 않음

div가 절대 위치로 설정되어 있고 div 아래로 밀어 넣지 않으려 고합니다.하지만 어떻게 할 수 있나요? 아래 div.Div가 절대 위치로 설정되어 다른 div가 아래로 밀려 나오지 않음

.header은 position: absolute으로 유지하고 싶지만 그 아래의 div는 .blog이어야합니다.

머리글 위치 만든 어떤 경우

body { 
 
    font-family: Georgia, serif; 
 
} 
 
.clear { 
 
    clear: both; 
 
} 
 
.header { 
 
    background-color: #e9118c; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    position: absolute; 
 
    padding: 5px 0 5px 0; 
 
} 
 
.inner-container { 
 
    padding: 0 30px 0 30px; 
 
    width: 1100px; 
 
    display: inline; 
 
} 
 
.search, 
 
.social { 
 
    display: inline-block; 
 
    width: 600px; 
 
} 
 
.social { 
 
    text-align: right; 
 
} 
 
.social img { 
 
    width: 35px; 
 
} 
 
.blog { 
 
    position: relative; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<header> 
 
    <title>Christina's Baking Adventure</title> 
 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500,700,900' rel='stylesheet' type='text/css'> 
 
    <link rel="stylesheet" type="text/css" href="./christinasbakingadventure.css"> 
 
</header> 
 
<body> 
 

 
<div class="container"> 
 
    <div class="header"> 
 
    <div class="inner-container"> 
 
     <div class="search"> 
 
     search box 
 
     </div> 
 
     <div class="social"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     <img src="./fb-icon.png" alt="facebook"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="clear"></div> 
 
    <div class="blog"> 
 
    <div class="inner-container"> 
 
     <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

출처

2015-01-26 Christina

이 아닌가? 절대 위치 된 요소는 어떤 요소가 있더라도 다른 요소의 위치를 변경하지 않습니다. –

패딩이나 여백을 사용하지 않고도 해결책을 볼 수 없습니다. –

: 상대를 그냥 블로그를 떴다? 당신이 .header 및 .blog에 대한 위치를 변경하지 않으려면

body { 
 
    \t font-family: Georgia, serif; 
 
    } 
 
    
 
    .clear { 
 
    \t clear: both; 
 
    } 
 
    
 
    .header { 
 
    \t background-color: #e9118c; 
 
    \t left: 0; 
 
    \t right: 0; 
 
    \t top: 0; 
 
    \t postition: relative; 
 
    \t padding: 5px 0 5px 0; 
 
    } 
 
    
 
    .inner-container { 
 
    \t padding: 0 30px 0 30px; 
 
    \t width: 1100px; 
 
    \t display: inline; 
 
    } 
 
    
 
    .search, .social { 
 
    \t display: inline-block; 
 
    \t width: 600px; 
 
    } 
 
    
 
    .social { 
 
    \t text-align: right; 
 
    } 
 
    
 
    .social img { 
 
    \t width: 35px; 
 
    } 
 
    
 
    .blog { 
 
    \t float: left; 
 
    }

<!DOCTYPE html> 
 
    <html> 
 
    \t <header> 
 
    \t \t <title>Christina's Baking Adventure</title> 
 
    \t \t <link href='http://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,500,700,900' rel='stylesheet' type='text/css'> 
 
    \t \t <link rel="stylesheet" type="text/css" href="./christinasbakingadventure.css"> 
 
    \t </header> 
 
    \t <body> 
 
    \t \t <div class="container"> 
 
    \t \t \t <div class="header"> 
 
    \t \t \t \t <div class="inner-container"> 
 
    \t \t \t \t \t <div class="search"> 
 
    \t \t \t \t \t \t search box 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t \t <div class="social"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t \t <img src="./fb-icon.png" alt="facebook"> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t \t <div class="clear"></div> 
 
    \t \t \t <div class="blog"> 
 
    \t \t \t \t <div class="inner-container"> 
 
    \t \t \t \t \t <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
 
    \t \t \t \t </div> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
    \t </body> 
 
    </html>

출처

2015-01-26 20:39:33 ErinJoan

, 그냥 .blog jsfiddle

 div class="container"> 
      <div class="header"> 
       <div class="inner-container"> 
        <div class="search"> 
         search box 
        </div> 
        <div class="social"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
         <img src="./fb-icon.png" alt="facebook"> 
        </div> 
       </div> 
      </div> 
      <div class="clear"></div> 
      <div class="blog"> 
       <div class="inner-container"> 
        <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo"> 
       </div> 
      </div> 
     </div>

CSS에서 정상을 추가

body { 
    font-family: Georgia, serif; 
} 

.clear { 
    clear: both; 
} 

.header { 
    background-color: #e9118c; 
    left: 0; 
    right: 0; 
    top: 0; 
    position: absolute; 
    padding: 5px 0 5px 0; 
} 

.inner-container { 
    padding: 0 30px 0 30px; 
    width: 1100px; 
    display: inline; 
} 

.search, .social { 
    display: inline-block; 
    width: 600px; 
} 

.social { 
    text-align: right; 
} 

.social img { 
    width: 35px; 
} 

.blog { 
    position: relative; 
    top: 60px; 
}

출처

2015-01-26 20:49:04

당신이 내 생각에 ake 간단한 일들 ;-)

우선, 당신이 자신의 clasess과 물건을 코딩하기 전에, 가장 많이 사용되는 태그의 기본값을 지우는 것을 고려해보십시오. 즉, 여백, 여백, 테두리 및 윤곽선 등의 값을 설정하십시오. 이 같은 예를 들어 0 :

html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
blockqoute, a, acronym, address, big, cite, code, img, q, small, strong, ol, ul, li, 
fieldset, form, label, table, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
}

이렇게 당신은 가능한 한 페이지의 요소를 많이 통제를 유지하며, 당신은 많은 suprises을 방지 할 수 있습니다.

또한 대부분의 경우 maring/padding을 사용하지 않아도되지만 단순히 해당 속성의 모든 값을 알 수 있습니다.

본문 태그의 여백 및 여백 만 지우면 머리말이 페이지의 왼쪽 상단으로 잘 보이게됩니다. 절대 위치는 필요 없습니다. 절대 사용하지 않고 당신이 원하는 것을 할 수있는 방법은

html, body, div, span, h1, h2, h3, h4, h5, h6, p, 
 
     blockqoute, a, acronym, address, big, cite, code, img, q, small, strong, ol, ul, li, 
 
     fieldset, form, label, table, tr, th, td { 
 
      margin: 0; 
 
      padding: 0; 
 
      border: 0; 
 
      outline: 0; 
 
      font-size: 100%; 
 
      vertical-align: baseline; 
 
      background: transparent; 
 
     } 
 

 
     body { 
 
      font-family: Georgia, serif; 
 
     } 
 

 
     .clear { 
 
      clear: both; 
 
     } 
 

 
     .header { 
 
      background-color: #e9118c; 
 
/* You don't have to have 4 values. 2 are equal to top-down left-right. */ 
 
      padding: 5px 0; 
 
      margin: 0; 
 
     } 
 

 
     .inner-container { 
 
      padding: 0 30px; 
 
      width: 1100px; 
 
      display: inline; 
 
     } 
 

 
     .search, .social { 
 
      display: inline-block; 
 
      width: 600px; 
 
     } 
 

 
     .social { 
 
      text-align: right; 
 
     } 
 

 
      .social img { 
 
       width: 35px; 
 
      } 
 

 
     .blog { 
 
      margin-top: 5px; 
 
     }

<!DOCTYPE html> 
 

 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title></title> 
 
    </head> 
 
<body> 
 
    <div class="container"> 
 
     <div class="header"> 
 
      <div class="inner-container"> 
 
       <div class="search"> 
 
        search box 
 
       </div> 
 
       <div class="social"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
        <img src="./fb-icon.png" alt="facebook"> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="clear"></div> 
 
     <div class="blog"> 
 
      <div class="inner-container"> 
 
       <!-- I'd recommend not to use inline styles. It's easier to maintain your code when everything is in stylesheet.--> 
 
       <!-- Create for example an id #logo with width set to 350 --> 
 
       <img src="./christinasbakingadventurelogo.png" style="width: 350px;" alt="Christina's Baking Adventure logo" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

출처

2015-01-26 21:20:22 ttarczynski

고마워요. 대단히 감사합니다. – Christina

당신을 환영합니다 :-) – ttarczynski

Div가 절대 위치로 설정되어 다른 div가 아래로 밀려 나오지 않음

답변

관련 문제