position, display관한 질문입니다.

position, display관한 질문입니다.

QA

position, display관한 질문입니다.

답변 2

본문

제가 아직 잘 이해가 안되는 부분중에 하나가 포지션과 디스플레이 이부분인데,,,알듯말듯합니다.

샘플로 레이아웃을 만들고 있는데요...

33085575_1548079236.5589.gif

[그림1]

 

위 그림처럼 card4~card9까지가 원래는 card1, card2, card3아래에 나오게 하고 싶은데요...

포지션과 디스플레이 설정이 알듯 말듯 헷갈려서 몇일째 씨름중인데 안되서 고수님들께 문의드립니다.

33085575_1548079344.7059.gif

[그림2]

 

[그림1]을 [그림2]처럼 레이아웃을 만들고싶습니다.

어떻게 CSS를 해야하는지 고수님들 조언부탁드립니다....

===================================================

    <style>
    .main_image-wrap {
        width: 100%;
        position: relative;
    }
    .main_image-wrap img {
        width: 100%;
        vertical-align: middle;
    }
    .main_image-text {
        padding: 5px 10px;
        background-color: yellow;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
      transform: translate( -50%, -50% );
    }
.wrap{
  position: absolute;
}
.over{
  position:relative;
  display: inline-block;
  top:350px;
}

    </style>

</head>
<body>
<!---- scroll to top 시작 -->
<div class="scroll-top-wrapper ">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-chevron-circle-up"></i>
    </span>
</div>
<!---- scroll to top 끝 -->

<div class="container-fluid" style="background-color:#253981; color:#FFF;">
  <div class="container">
    <div class="row">
      <div class="col-md-6" style="text-align:left; height:50px; font-weight:900;">
        <h5 style="text-align:left; margin-top:3%; font-weight:900;">Head sub Title. Head sub Title</h5>
      </div>
      <div class="col-md-6" style="text-align:right; height:50px; font-weight:900;">
        <ul class="list-inline" style="margin-top:3%; font-weight:bold;">
          <li>로그인</li>
          <li>/</li>
          <li>회원가입</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!---- 네비게이션 시작 -->
 <nav class="navbar navbar-default">
  <div class="container-fluid">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header" style="min-height:80px;">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" style="padding-left:0px;" href="#"><img style="margin-top:1.5em;" alt="Brand LOGO"
        >LOGO</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Menu1</a>
        </li>
        <li>
          <a href="#">Menu2</a>
        </li>
        <li>
          <a href="#">Menu3</a>
        </li>
        <li>
          <a href="#">Menu4</a>
        </li>
        <li>
          <a href="#">Menu5</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
    </div>
  </div><!-- /.container-fluid -->
</nav>
<!---- 네비게이션 끝 -->

<!---- 메인 풀이미지 시작 -->
<div class="container-fluid main_image-wrap wrap">
    <div class="row main_image-image">
      <img src="C:\Users\juno0\OneDrive\바탕 화면\연세실버요양원\image\main_Slider.jpg" class="img-responsive" alt="main_Slider">
    </div>
  <div class="row main_image-text">
    <p>main image title1</p>
    <p>main image title2</p>
  </div>
</div>
<!---- 메인 풀이미지 끝 -->
<div class="container">
  <div class="row">
    <div class="col-md-4  over" style="background:#2a68d9; height:300px;">card1</div>
    <div class="col-md-4  over" style="background:#f00; height:300px;">card2</div>
    <div class="col-md-4  over" style="background:#2ad978; height:300px;">card3</div>
  </div>
</div>

<!-- product 시작 -->
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-2" style="background:#d92acd; height:100px;">card4</div>
      <div class="col-md-2" style="background:#d98e2a; height:100px;">card5</div>
      <div class="col-md-2" style="background:#2ac9d9; height:100px;">card6</div>
      <div class="col-md-2" style="background:#d92a54; height:100px;">card7</div>
      <div class="col-md-2" style="background:#a2b1cc; height:100px;">card8</div>
      <div class="col-md-2" style="background:#d92aa3; height:100px;">card9</div>
    </div>
  </div>
</section>
<!-- product 끝 -->


  </body>
</html>

===================================================

 

이 질문에 댓글 쓰기 :

답변 2

포지션속성으로 잡으면 안되고 반응형코드가 사용된거보니 그걸 이용하셔야하는데

 

웹지식이 어느정도인지 모르니 알려주기도 애매하네요

 

4~9까지 태그소스를 아래에 두면됩니다. 포지션 속성으로 잡힌것을 없애야해요

그렇군요 그럼카드 123을 top 값을 줄여주면 카드 4~9번쪽에 겹칠수도있을거에요

현재 123번카드는 붕떠있는 상태라 높이값이 없는거죠

근대 4~9번은 높이값이 있기때문에 1~3번보다 위에 위치한거처럼보이는것일거구요

결국 4~9를 내려주려면 소스구조를 titleabc 보다 밑에쪽으로 옴겨주셔야될거같습니다

이거는 그니까 구조를 다시잡는게 나을거같습니다 구지 포지션으로하자면 absolute 를 줘서 bottom값으로 조정할수있지만 위아래 구조를 다시잡는게 더빠르지않을까요 card 1,2,3 이 위로가는 모양으로 다시 짜는게 어떠세요

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 11
© SIRSOFT
현재 페이지 제일 처음으로