position, display관한 질문입니다.
본문
제가 아직 잘 이해가 안되는 부분중에 하나가 포지션과 디스플레이 이부분인데,,,알듯말듯합니다.
샘플로 레이아웃을 만들고 있는데요...
[그림1]
위 그림처럼 card4~card9까지가 원래는 card1, card2, card3아래에 나오게 하고 싶은데요...
포지션과 디스플레이 설정이 알듯 말듯 헷갈려서 몇일째 씨름중인데 안되서 고수님들께 문의드립니다.
[그림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까지 태그소스를 아래에 두면됩니다. 포지션 속성으로 잡힌것을 없애야해요
아...말씀감사합니다...포지션 속성을 잡은건...카드1, 2, 3을 메인 이미지 위에 조금 겹치기 위해서 포지션을 잡고 top:350px;를 줬는데...덩달아서 카드4~9까지도 따라 올라가서요...ㅠㅠ;
그렇군요 그럼카드 123을 top 값을 줄여주면 카드 4~9번쪽에 겹칠수도있을거에요
현재 123번카드는 붕떠있는 상태라 높이값이 없는거죠
근대 4~9번은 높이값이 있기때문에 1~3번보다 위에 위치한거처럼보이는것일거구요
결국 4~9를 내려주려면 소스구조를 titleabc 보다 밑에쪽으로 옴겨주셔야될거같습니다
이거는 그니까 구조를 다시잡는게 나을거같습니다 구지 포지션으로하자면 absolute 를 줘서 bottom값으로 조정할수있지만 위아래 구조를 다시잡는게 더빠르지않을까요 card 1,2,3 이 위로가는 모양으로 다시 짜는게 어떠세요
현재는 card1, card2, card3이 이미지 위에 겹쳐있는 부분인데요...덩달아서 card4~ card9까지도 덩달아 올라와서요...카드4~카드9는 TitleABC밑으로 보내고 싶은데...영안되서요...ㅠㅠ;