# CSS Battle: #15 - Overlap



In this article, I will solve a [Overlap](https://cssbattle.dev/play/15) CSS Challenge on [CSS Battle](https://cssbattle.dev). Let's look at the problem first.

## Problem 

We need to create the following container by using CSS Properties only:
![Overlap](https://cssbattle.dev/targets/15.png)

## Solution

So now look at the Solution and how we are going to achieve this. 

%[https://youtu.be/fTlNwTeVVA0]

### HTML


```html
<p> 
<a> 
```


- `<p>` : Circles
- `<a>` : overlap of both circles


### CSS

Now let's style the containers. 

```css
* {
  background: #09042a;
}
body {
  margin: 75;
}
p, a {
  border-radius: 1in;
  width: 150;
  height: 150;
}
p {
  background: #7b3f61;
  position: relative;
  overflow: hidden;
  box-shadow: 100px 0 #e78481;
}
a {
  position: absolute;
  left: 100;
}
```


><small>Note: In CSS Battle you can use `100` instead of `100px`. You don't need to define `px` in CSS. However, if you are using `rem` or `%`, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info [visit here](https://cssbattle.dev/tips)</small>

><small>Minify the code or CSS by using any [CSS Minifier](https://www.minifier.org/). It helps you to reduce the characters in the code which will increase the score.</small>

**Minified Version:**
```
<p><a><style>*{background:#09042A}body{margin:75}p,a{border-radius:1in;width:150;height:150}p{background:#7B3F61;position:relative;overflow:hidden;box-shadow:100px 0 #E78481}a{position:absolute;left:100}
```

### Wrapping up
There are many ways to solve this. You can share your approach in the comments. If you like this then don't forget to ❤️ it. And I'll see you in the next article. See you soon.