position: relative; 질문좀 ㅜㅜ

작성일 2011.01.15댓글 3건

게시물 수정 , 삭제는 로그인 필요

안녕하세요 웹디자인을 하고 있는데..

코딩하다가 오른쪽에 배너를 넣으려고 하는데..

position: relative; 하고 나니

배너 크기만큼 중앙 컨텐츠가 밀려버리네요..

안밀리게 하는방법이 없을까요..?

js?인가 그거 써야 하는지..요..

좀 알려주세요..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layouts - 1 Column Layout - 31</title>
<style type="text/css">
#banner{
position: relative;
width: 200px;
height:400px;
top:10px;
left: 800px;
background-color: #FF9900;
}

* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
#wrapper {
width: 770px;
margin: 0 auto;
}
#header {
border: 1px solid #ccc;
margin: 5px;
height: 70px;
padding: 10px;
background-color: #C9C9BE;
}
#centercolumn {
border: 1px solid #ccc;
margin: 0 5px 5px 5px;
display: inline; /* IE Hack /
padding: 4px;
width: 97.4%;
float: left;
min-height: 300px;
}
html #centercolumn {height:300px} /* IE Min-Height Hack /

#footer {
background-color: #A3A38F;
margin: 0 5px 5px 5px;
display: inline; / IE Hack */
padding: 4px;
float: left;
width: 97.8%;
}
</style>
</head>

<body>
<div id="wrapper">

   <div id="banner">
      <div id="a">배너 나오는곳</div>
   </div>

   <div id="centercolumn">
     <p>이공간을 위로 올리는 방법은 없나요..?</p>

      <p align="center"> </p>
      <p align="center"> </p>
      <p align="center"> </p>
      <p> </p>
</div>
   <div id="footer">Footer</div>

</div>

</body>
</html>

#position relative absolute #position relative 가운데 정렬 #position relative z-index #position relative 뜻 #position relative absolute 차이 #position relative fixed #position relative 겹침 #position relative center #position relative 안될때 #position relative height

익명 작성일 -

스타일을 아래와 같이(빨간색 부분) 수정하세요.

보통 position 속성을 absolute로 주면 left와 top으로 위치를 지정했을 때 브라우저의 좌측 상단을 기준으로 위치가 정해지게 됩니다. 하지만, absolute값을 준 요소(#banner)의 부모 요소(#wrapper)에 relative값을 가진 position 속성이 있게 되면 그 부모 요소의 좌측 상단이 기준이 됩니다.

그러므로, #banner의 위치는 #wrappe 위치를 기준으로 왼쪽에서 800px, 위에서 10px 떨어진 곳에 있게 됩니다. 그리고 absolute값을 가진 요소는 페이지의 흐름과는 상관 없이 배치되므로 #centercolumn와 #footer는 #wrapper 바로 아래 위치에 표시됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Layouts - 1 Column Layout - 31</title>
<style type="text/css">
#banner{
    position: absolute;
    width: 200px;
    height:400px;
    top:10px;
    left: 800px;
    background-color: #FF9900;
}

* {
    padding: 0;
margin: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 12px;
}
#wrapper {

position: relative;
width: 770px;
    margin: 0 auto;
}
#header {
border: 1px solid #ccc;
    margin: 5px;
    height: 70px;
    padding: 10px;
    background-color: #C9C9BE;
}
#centercolumn {
    border: 1px solid #ccc;
    margin: 0 5px 5px 5px;
display: inline; /* IE Hack /
    padding: 4px;
    width: 97.4%;
    float: left;
    min-height: 300px;
}
html #centercolumn {height:300px} /* IE Min-Height Hack /

#footer {
    background-color: #A3A38F;
    margin: 0 5px 5px 5px;
    display: inline; / IE Hack */
    padding: 4px;
    float: left;
width: 97.8%;
}
</style>
</head>

<body>
<div id="wrapper">

    <div id="banner">
<div id="a">배너 나오는곳</div>
    </div>

    <div id="centercolumn">
        <p>이공간을 위로 올리는 방법은 없나요..?</p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p align="center"> </p>
        <p> </p>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

익명 작성일 -

position: relative; 가 아니고, float: right; 를 주셔야 할 것 같은데요?

익명 작성일 -

relative를 사용 하셨으니 상위 객체에 대한 상대적인 위치를 잡습니다.

즉, 절대적인 위치가 아닌 상위 객체 id="wrapper" 에 대해서 그 블록을 기준으로 위치를 잡을 수 있습니다.

id=banner 하고 centercolum 그리고 footer 은 같은 레벨의 div 이기 때문에 relative로 하단면 banner이

footer 밑으로 가야 겠지요

<div id="wrapper">

   <div id="centercolumn">
     <p>이공간을 위로 올리는 방법은 없나요..?</p>

      <p align="center"> </p>
      <p align="center"> </p>
      <p align="center"> </p>
      <p> </p>
</div>
   <div id="footer">Footer</div>
   <div id="banner">
      <div id="a">배너 나오는곳</div>
   </div>

</div>

position: relative; 질문좀 ㅜㅜ

... 좀 알려주세요.. CSS Layouts - 1 Column Layout - 31 #banner{ position: relative; width: 200px; height:400px; top:10px; left: 800px; background-color: #FF9900;...

css position:relative 질문입니다.

... 사용해보셨으면 좀 더 이해가 쉽습니다. 내가 선택한 요소를 기준으로... Page Title .con1 {height:500px;background-color:grey} .con2 { position:relative; background-color...

html / css position:relative와...

두가지질문이있습니다.. 진짜 몇시간째 혼자하다가 안풀려서... 이건 좀 이상한데요. container2에 position:relative를 추가하면, 1.에서처럼 완전히...

relative & position:<x> absolute 질문...

부모의 부모 요소에position:relative가 적용되어 있고, 이에 자식 요소는... 좀 더 자세하고 명확하게 개념을 아시는 분 계신가요? 설명 좀...

nextjs, css position질문

nextjs를 이용한 프로젝트의 fixed position 관련해서 질문드립니다. 지금 page... component1의 position은 relative로 되어있고, mousemove에 따른 rotateX,Y 전환 효과가...

position, fixed, sticky

css position 속성의 absolute 의 이해

... CSS 속성을 공부하다가 position 선택자가 이해가 잘 안가서 질문을 드립니다. 기본 값 static과 relative... 내용과 개념을 좀 보충해봅시다. position은 자기...

CSS position 질문입니다.

position: relative <a.class="포지션"> position: absolute <a.class="포지션없음... 왜 그런건가요? 글을 쓰는 것이 좀 힘들어서 그림으로 대체합니다.

css position absolute 기초 좀 봐주세요

... 질문 좀 드려도 될까요? .box { width: 100px; height: 100px; } .red { background... 혼자 독학하니깐 어려운 점이 많네요..ㅜㅜ position: absolute는 상위(부모)...

css기초, css, position

html css 질문드립니다 position...

... 형태가 좀 다르네요. 그냥 쉽게말하면 넣을걸 안넣어서?... div등에 position:relative를 넣어줄 필요가 있습니다. 그래야 기준점이 감싸는...

css position으로 레이아웃 구성하는것...

... 답답해서 질문드립니다. 위에 그림처럼 position... content는 position:relative함. 긴쪽을 relative해야... ㅜㅜ container에 꼭 포함이 되어야 하는건지.. 정말 쉽게...

css, position, relative, absolute, CSS, 웹디자인