How to Make a Border Overlay Child Div

How to make a border overlay child div?

You can consider the use of pseudo element to create the border and avoid extra markup. You can also easily control its position/size:

body {

  background: grey;

}

.button {

  background: #94c120;

  width: 200px;

  height: 50px;

  margin: 50px;

  position: relative;

}

.button:before {

  content: "";

  position: absolute;

  top: -15px;

  left: -15px;

  width: 100%;

  height: 100%;

  border: 5px solid #fff;

  box-sizing: border-box;

}

<div class="button">

  some text

</div>

Create border for overlay element as child of parent with dynamic width and height

As opposed to overlaying divs, just use the pseudo element :after. It works for dynamic content and only requires a parent element.

Basically, just set the parent div to display:inline-block to be the same size as the child. Then set the :after content to width:100%/height:100% - thus taking the size of any dynamic image. The HTML is simple, as it only requires a single parent div, no need for an extra overlay class.

jsFiddle here

HTML - extremely simple - no redundancy.

<div>
    <img src="https://si0.twimg.com/profile_images/2704840564/ace6835dc7c12861b013a8f1ac3b1041.png">
</div>

CSS

div {
    display: inline-block;
    background: red;
    position: relative;
}

img {
    vertical-align: top;
}

div:hover:after {
    content: "\A";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid black;
    opacity: 0.75;
    background: red;
    z-index: 2;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Child div has an offset border

Add box-sizing: border-box; in .overlay will work.

.container {

  background: pink;

  width: 40rem;

  height: 25rem;

  display: flex;

  flex-wrap: wrap;

}

.box {

  background: yellow;

  width: 8rem;

  height: 8rem;

  margin: 1rem;

  position: relative;

}

.overlay {

  border: 0.75rem solid red;

  position: absoulte;

  width: 100%;

  height: 100%;

  box-sizing: border-box; /* Use box-sizing */

}

<div class="container">

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

  <div class="box">

    <div class="overlay"></div>

  </div>

</div>

On hover how can I make my child border overlap the parent border?

So long as you know the width of the borders and are able to use relative positioning... I have exaggerated the borders here for clarity.

.parent {
  border:5px solid red;
  display:inline-block;
  position: relative;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
  position: relative;
}

.parent a:hover{
  border:5px solid #ddd;
  margin: -5px;
}

https://jsfiddle.net/kd0gf31z/

Better way to make the child element's border to overlap with parent's

I believe the coolest option is to use background, divs, and width.

Animation Demo

using divs in stead of borders gives you a lot more control over the elements.

<div class="title">
    <div class="title-inner">Lorem Ipsum</div>
    <div id='line'>
        <div id='load'></div>
    </div>
</div>

after you use your divs you set the css

body {
    background: black;
    color: #ddd;
    font-family: Helvetica, sans-serif;
    margin: 2em;
}
.title-inner {
    padding: 17px;
}
#line {
    background-color:purple;
    height:2px;
    width:100%;
}
#load {
    background-color:yellow;
    height:100%;
    width:0%;
}

then you can manipulate the code using javascript.

   function loop() {
        $('#load').animate({
            width: "50%"
        }, 1600);
        $('#load').promise().done(function () {
            $(this).width(0);
            loop();
        });

    }
loop();

How to Overlap Parent Div From Child Div

Sajjan's the closest from what I can tell, but his has a few flaws:

1. Position: absolute requires its parent to have a non-static position (this is often done with position: relative, which effectively works the same way as static).
2. You don't need to set the height and width of the child, just the parent.

Here's my Fiddle for it to demonstrate.

#parent {
    border: 5px solid gray;
    position: relative;
    height: 100px;
    width: 100px;
    margin-left: 50px;
}

#child {
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
}

The key here is the position: relative on the parent.

I am curious, though, what exactly you're trying to achieve with this. I have a feeling that whatever it is, there's a better way.

---

Related Topics