0

Let's say we have a div that has an outline and as inner html we have a span that has an outline as well. I would expect the outline of the inner span to go as foreground relative to the outline of the div, but that's not true! we can see with the following code that the outline of the div is above the outline of the span. My question is why does this happen, and how can I make the outline of the span to go above the div's one using css?

<html>
<head>
    <title>test</title>
    <style>
        #background-div {
            display: flex;
            background-color: #555;
            width: 100px;
            height: 50px;
            outline-style: solid;
            outline-width: 4px;
            outline-color: #999;
        }
        #foreground-span {
            background-color: #fff;
            width: 100px;
            height: 25px;
            outline-style: solid;
            outline-width: 7px;
            outline-color: #f00;
        }
    </style>
</head>
<body>
    <div id="background-div">
        <span id="foreground-span"></span>
    </div>
</body>
</html>
Bill TheKid
  • 63
  • 4

1 Answers1

1

Do you mean like that? If you want to change foreground and background, you can use the z-index property

<html>
<head>
    <title>test</title>
    <style>
        #background-div {
            display: flex;
            background-color: #555;
            width: 100px;
            height: 50px;
            outline-style: solid;
            outline-width: 4px;
            outline-color: #999;
        }
        #foreground-span {
            background-color: #fff;
            width: 100px;
            height: 25px;
            outline-style: solid;
            outline-width: 7px;
            outline-color: #f00;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="background-div">
        <span id="foreground-span"></span>
    </div>
</body>
</html>
Patrick
  • 146
  • 2