Css Position Relative/Absolute is disturbing the Layout [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Please checkout the following fiddle
HTML structure and Css is almost same. that i am using in my project.
Currently i have 3 sections in my design
HEADER
Portfolio
Slider Troubling section
I am using bootstrap 3 latest version.
I have given position relative to Portfolio section and its inner block to position absolute with top: -50px;
Every thing is fine here. but problem comes when i add new section "Slider". It is coming over the Portfolio section. I have tried giving it position and different block properties. but still slider section is coming over the portfolio section. When i remove Positions from Portfolio section
the Slider section goes back to it normal position which is what i want.
Can anyone please check the following fiddle and tell me what i am doing wrong.
Design is like that Portfolio section is little bit over the header. that's why i am using position.
<script async src="//jsfiddle.net/DTcHh/29616/embed/"></script>
https://jsfiddle.net/DTcHh/29616/

Answer 1

I'd rather not use position: absolute where it's not needed because it breaks the flow. You need only position relative or negative margin-top to move the element up. See example https://jsfiddle.net/DTcHh/29623/
<header class="container-fluid header">
<div class="row">
<h1>HEADER</h1>
</div>
</header>
<section class="container">
<div class="row position-relative">
<div class="col-sm-10 col-sm-offset-1 position-relative-col">
<div class="height">
<h2>Some Portfolio items here</h2>
</div>
</div>
</div>
</section>
<section class="container trouble">
<div class="row">
<h3>Slider Troubling section</h3>
</div>
</section>
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.header {
background: lightblue;
padding:25px;
}
.position-relative {
position:relative;
}
.position-relative-col {
background: green;
position: relative;
top: -50px;
}
.trouble {
background: darkblue;
opacity: 0.8;
color: white;
}
.height {
height: 100px;
}

Answer 2

try add to the container class height property. It should work:
.container{
height: 100px;
}

Answer 3

Check my update I hope it helps.
http://jsfiddle.net/DTcHh/29626/
what I did are put the slider and portfolio into the same tag that using position:relative and top: -50px;

Answer 4

You are using the bootstrap 3 grid wrong. For each row you have to add a row class and for each item in the row class you have to use the class col-*-*. I have written based on your code some new code with the proper use of bootstrap grid.
http://jsfiddle.net/DTcHh/29627/
Please let me know if this is not good, and what you try to achieve instead.