CODEWITHSUNDEEP
htmlcss
jallen
jallen

Reputation: 612

Div element to overlap wrapper div into the previous div

I'm trying to get the icon in the second wrapper div to cross up and dissect the previous wrapper div but the half that is supposed to appear in the div above will not appear. Even with a higher z-index. If I change the wrapper div overflow or position styles, it throws everything off. What is the correct way to do this? Here is the html and the css:

.wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 40px;
  height: auto;
  clear: left;
  overflow: auto;
  z-index: 1;
}
.process {
  width: 100%;
  height: 100%;
  z-index: 1;
}
.process .icon {
  position: relative;
  height: 123px;
  width: 123px;
  margin-top: -60px;
  border-radius: 50%;
  z-index: 3;
}
<div class="wrapper">
  <div class="page-heading">
    <div class="col-md-6 col-centered">

    </div>
  </div>
</div>
<div class="wrapper blue">
  <div class="process">
    <div class="icon blue border-blue col-centered">

    </div>
    <div class="col-md-4 col-md-offset-1">
      <div class="entry-content">

      </div>
    </div>
    <div class="col-md-7 padding-right-100">

    </div>
  </div>
</div>

Upvotes: 0

Views: 270

Answers (2)

Johannes
Johannes

Reputation: 67768

There is no table display necessary. What you need are actual heights for all elements - auto height won't work with no content, and 100% height only works if the parent container's height ( in this case body) is also defined. I made the body 100% and the two wrappers 50% .

The circle DIV has been centered horzontally with margin: 0 auto and pushed up using top: -60px while having: position: relative. The z-indexes remained unchanged 1 for the wrappers, 3 for the circle/icon (could also be 2).

There is also a codepen at http://codepen.io/anon/pen/KgNXmj

html, body {
  height: 100%; 
  margin: 0;
}
.wrapper {
  width: 100%;
  height: 50%;
  z-index: 1;
  background: green;
}
.process {
  width: 100%;
  height: 100%;
  z-index: 1;
  background: blue;
}
.process .icon {
  position: relative;
  top: -60px;
  margin: 0 auto;
  height: 123px;
  width: 123px;
  background: #f00;
  border-radius: 50%;
  z-index: 3;
}
<div class="wrapper">
  <div class="page-heading">
    <div class="col-md-6 col-centered">

    </div>
  </div>
</div>
<div class="wrapper blue">
  <div class="process">
    <div class="icon blue border-blue col-centered">

    </div>
    <div class="col-md-4 col-md-offset-1">
      <div class="entry-content">

      </div>
    </div>
    <div class="col-md-7 padding-right-100">

    </div>
  </div>
</div>

Upvotes: 1

jallen
jallen

Reputation: 612

After much research and hair-pulling, I found a solution that works. Not sure WHY, but the parent div had to have display:table and the child div display:table-row. If anyone knows why this works, definitely feel free to share.

Upvotes: 0

Related Questions