Is it possible to use CSS to conceal one div's border behind another div?

Is there a way to hide the border div behind the circle without overlapping it? I'm thinking that using z-index might be the solution.

Any suggestions on how to achieve this effect?

JSFIDDLE: http://jsfiddle.net/qs5xmege/1/

CSS and HTML

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  width:22px;
  height:22px;
  border-radius:11px;
  border: 3px solid red;
  background-color: #FFF;
  margin: 30px auto 0 auto;
  z-index: 100;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="container">
  <div class="border"></div>
  <div class="circle"></div>
</div>

htmlcss

Answer №1

Make sure to give .circle a position:relative, as z-index will only work with elements that have position:relative, position:absolute, or position:fixed. 

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  width:22px;
  height:22px;
  border-radius:11px;
  border: 3px solid red;
  background-color: #FFF;
  margin: 30px auto 0 auto;
  position: relative;
  z-index: 100;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="container">
    <div class="border"></div>
    <div class="circle"></div>
</div>

Answer №2

Insert position:relative; into the style of .circle.

The z-index property requires a value of relative, absolute, or fixed when using the position attribute.

Answer №3

Make sure to set position:relative for the div with a circle and use z-index:2 to create a layer above the border.

.circle {
    background-color: #FFFFFF;
    border: 3px solid #FF0000;
    border-radius: 11px;
    height: 22px;
    margin: 30px auto 0;
    position: relative;
    width: 22px;
    z-index: 2;
}

Snippet

.container {
  width: 15%;
  height: 100px;
  float: left;
  position: relative;
}
.circle {
  background-color: #FFFFFF;
  border: 3px solid #FF0000;
  border-radius: 11px;
  height: 22px;
  margin: 30px auto 0;
  position: relative;
  width: 22px;
  z-index: 2;
}
.border {
  width: 50%;
  height: 100px;
  position: absolute;
  border-right: thin solid black;
  top: 0;
  left: 0;
  z-index: 1;
}
<div class="container">
  <div class="border"></div>
  <div class="circle"></div>
</div>

Answer №4

Here is a possible solution:

    .oval {
        background-color: #ffffff;
        border: 3px solid blue;
        border-radius: 50%;
        display: inline-block;
        height: 30px;
        margin: 0 auto;
        position: relative;
        top: -50px;
        width: 60px;
    }
.wavy-border {
    border-bottom: medium double green;
    height: 150px;
    width: 70%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

positioning elements within a div in the center

I am facing an issue with centering the contents of a div Despite trying various methods, I am unable to center the images. The structure I have is as follows: <div class="middleSlideContents"> <div class='image'> <im ...

jquerycsshtmlalignment

An effective method to arrange divs in a line adjacent to each other

Apologies for the repetitive question, but I am in need of some answers. In my opinion: Having 1 div with a width of 100% and 2 divs inside each with a width of 50%. Why does it not fit properly? HTML: <div id="top-menu"> <div id="logo">& ...

csshtmlcss-position

Checkbox in Bootstrap should be displayed before the submit button on smaller screens

I've been searching for a solution to this issue without any luck. In my setup, there are three input fields and a submit button displayed side by side on large screens, enclosed in <div class="col-sm"> to stack vertically on mobile devices. Ho ...

cssbootstrap-4

get the queryset for a dropdown menu item in Django

Currently, I am in the process of creating an HTML calendar page with a dropdown feature to select different months. Accessing this calendar page can be done through the navigation bar set up in my base.html base.html - Direct access to the calendar page. ...

djangohtmlbootstrap-4

The AngularJS controller is causing the curly brackets to be the only thing printed

Currently, I am diving into an Angular JS tutorial and finding myself facing a puzzling situation. Despite double-checking the code against the instructor's, all I see in the browser are {{name}} and {{age}}. Can anyone shed some light on what might b ...

javascripthtmlangularjs

JavaScript code is not functioning properly on Internet Explorer 10

Upon selecting an option, I need to activate buttons. This functionality works smoothly in all browsers except for IE10. The HTML for the select element: <select id="tenants" name="tenants" size="10" class="reportOption" onchange=""> <option va ...

javascriptjqueryhtml

Sending an AJAX request when refreshing a page segment

I have recently registered, but I have been a silent reader for years. Up until now, I have managed to find the answer to all my questions by searching on Stack Overflow. However, I am faced with a new challenge... I am new to AJAX and I am in the process ...

javascriptphpjqueryhtmlajax

A Javascript function that generates arguments dynamically

Here is some code: loop(n times) create HTML Button Element count++; assign onclick event = function(){ openAction("Value_"+count) } If I create 3 input elements (n=3) and then click an ...

javascripthtmlfunction

Transform an xlsx document into a HTML file using VBscript or batch script

After extensive research, I have come up empty-handed in finding a solution to the issue I am facing. The problem at hand is that I have an Excel file in .xlsx format that needs to be converted to .html on a regular basis throughout the day. Once converte ...

htmlexcelbatch-filevbscriptxlsx

Is it possible to apply a single jQuery statement to multiple selectors within the same webpage?

It may seem like a minor issue, but I've encountered a small dilemma. I have SVG icons on my webpage that are supposed to reveal a hidden div when hovered over. While the first icon functions as expected, subsequent icons do not show the hidden div. A ...

jquerycsssvg

Looking for assistance with CSS to properly align a dozen items

UPDATE: See the current layout in this JFiddle based on feedback received from others, still a few tweaks needed. In my setup, there are 12 divs housed within one container div. These 12 divs consist of 6 text components and 6 corresponding input fields. ...

cssformat

Having issues with the addClass() method in JavaScript not functioning properly on hover

Coding Challenge <ul class="navBarExtended"> <li><a href="#">Link</a></li> </ul> Styling Solution .onHover{ text-decoration: underline; } Interactive Scripting $("ul.navBarExtended li a").hover( function() ...

javascripthtmlcssjquery

Sticky top navigation bar in Bootstrap 4 followed by a section immediately below

Struggling to achieve a transparent Bootstrap 4 sticky navbar that reveals the background color of the following section on initial load. Once the user scrolls past 50px, I want the navbar to smoothly fade to white. I'm close to getting it right, but ...

csstwitter-bootstrapcoffeescript

Discovering the method for retrieving JavaScript output in Selenium

Whenever I need to run JavaScript code, the following script has been proven to work effectively: from selenium import webdriver driver=webdriver.Firefox() driver.get("https:example.com") driver.execute_script('isLogin()') However, when I atte ...

javascriptpythonhtmlfunctionselenium

Efficiently Organizing Data Using Coldfusion Loops in Columns and Rows

My issue lies in pulling data from a database to display on my website. I have three keys/attributes (columns) - PostedDate, DataImage, and Source that need to be shown together in one div with the posted date at the top, image in the middle, and source at ...

javascriptmysqlcsssqlcoldfusion

Choosing from a dropdown menu by pressing keys

When I press the first letter of an option in my dropdown list, it works fine. However, if I try to press two, three, or four letters consecutively, the control vanishes. For example, if the option is 'Jquery' and I press J only, it works but pre ...

jqueryhtmltwitter-bootstrap

How can I add margins to a Bootstrap v5 column that spans the full height and width of the content?

In this scenario, I have two rows and two columns in each row. My goal is to make the yellow blocks take up all available space in the column while having a margin. However, currently the margin disrupts the alignment of the yellow content. https://i.ssta ...

javascriptcsstwitter-bootstrapbootstrap-5

Using Python to retrieve data from MySQL and display it in HTML

I am looking to create a system that queries an SQL database every hour and displays the values on a website using Python. However, I am unsure of where to begin. Most resources online mention PHP or focus on pulling data from a website into a database. ...

pythonhtmlmysqldjango

The animation will not scroll down with the div

Having some trouble getting this div to slide down smoothly when the button is clicked. The animation seems to glitch whenever the div opens or closes. I've attempted adding position:relative and overflow:hidden, but it doesn't seem to be doing ...

javascriptjqueryhtmlcssbootstrap-4

The margin for the navbar cannot be set to "0"

I'm currently in the process of building a website, and I decided to experiment with integrating Bootstrap into it. I've utilized the navbar tags along with some custom CSS, but I'm facing an issue with removing the margin. As a result, the ...

htmlcsswebbootstrap-5