Title: Problems trying to overlap elements
Last modified: August 20, 2016

---

# Problems trying to overlap elements

 *  [rdbrotherton](https://wordpress.org/support/users/rdbrotherton/)
 * (@rdbrotherton)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/)
 * I’m new to WordPress but know the basics of html and CSS. I’m trying to get the
   blog content element to overlap my header image. Similar to what BBC Sport does,
   as demonstrated by the link below:
    [http://www.bbc.co.uk/sport/0/formula1/19400192](http://www.bbc.co.uk/sport/0/formula1/19400192)
   Notice how the white part of the article titled “Jaime Alguersuari column: Belgian
   Grand Prix preview” overlaps the image of the F1 car?
 * This is what I’m trying to replicate, but keep the sidebar remain at its default
   position so you should end up with something like the example I’ve mocked up 
   [here](http://rdb.x10.mx/blog.php)
 * I’ve tried editing the CSS stylesheet to
 *     ```
       #primary {
       	float: left;
       	margin: -50px -26.4% 0 22%;
       	width: 100%;
       	background:#fff;
       }
       #content {
       	margin: -50px 34% 0 7.6%;
       	width: 58.4%;
       	background:#fff;
       }
       #secondary {
       	float: left;
       	margin-right: 7.6%;
       	width: 18.8%;
       }
       ```
   
 * but while this does move the content to the position I want it, it doesn’t overlap
   my logo. I’ve tried playing around with z-index but the result was pretty much
   no different. This is what my blog looks like at the moment:
    [http://rdb.x10.mx/blog/](http://rdb.x10.mx/blog/)
   The sidebar is also moving with the blog articles, so info on how to put that
   back down the page would also be useful!
 * I know its probably something simple that I’m missing…
 * Thanks for any help you can give.

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Thread Starter [rdbrotherton](https://wordpress.org/support/users/rdbrotherton/)
 * (@rdbrotherton)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013234)
 * Anyone?
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013235)
 * Apply `position: relative;` to these selectors `.left-sidebar #content` and `.
   container`.
 *  [Jamie Gill](https://wordpress.org/support/users/patchgill/)
 * (@patchgill)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013238)
 * Hi rdbrotherton,
 * As Andrew said you need to apply the Position rule for the z-index to work. As
   I can see at the minute your logo has a z-index of -500, once a position element
   is placed in the css this works correctly.
 * hope this helps
 * Patch
 *  Thread Starter [rdbrotherton](https://wordpress.org/support/users/rdbrotherton/)
 * (@rdbrotherton)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013242)
 * Hi guys thank you for your help so far. That’s done mostly done the trick, just
   two more things if you don’t mind please!
 * 1. If you visit [my blog](http://rdb.x10.mx/blog/) now you’ll note two small 
   areas of white which shouldn’t be there. Do you know how I can remove these?
 * 2. My container div is set to a max of 1008px however the blog posts div doesn’t
   extend across to fill the right hand side. Which part of the CSS file should 
   I be editing for this adjustment?
 * Thanks again.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013245)
 * 1. I can’t see what you mean.
 * 2. Try a width of 66% to `.left-sidebar #content`.
 *  [potentweb](https://wordpress.org/support/users/potentweb/)
 * (@potentweb)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013259)
 *     ```
       #main {
       clear: both;
       padding: 1.625em 0 0;
       margin-top: -40px;
       background: white;
       }
       ```
   
 * Change the background from white to black.
 *  Thread Starter [rdbrotherton](https://wordpress.org/support/users/rdbrotherton/)
 * (@rdbrotherton)
 * [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013297)
 * Thanks guys, appreciate it. Think I’ve got the idea of which tags control the
   main elements.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Problems trying to overlap elements’ is closed to new replies.

## Tags

 * [divs](https://wordpress.org/support/topic-tag/divs/)
 * [elements](https://wordpress.org/support/topic-tag/elements/)
 * [margins](https://wordpress.org/support/topic-tag/margins/)
 * [overlap](https://wordpress.org/support/topic-tag/overlap/)
 * [overlapping](https://wordpress.org/support/topic-tag/overlapping/)

 * 7 replies
 * 4 participants
 * Last reply from: [rdbrotherton](https://wordpress.org/support/users/rdbrotherton/)
 * Last activity: [13 years, 9 months ago](https://wordpress.org/support/topic/problems-trying-to-overlap-elements/#post-3013297)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics