Question: I have the following html..

```css
.wrapper {
  background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}
```

```html
<div class="wrapper">
This is my content
</div>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
```

The notice is covering up my content, I know I can add some padding to fix this but how can I add it so that the padding only applies if the .woocommerce-store-notice is visible?

Answer: 
You may solve it using 1 line of jQuery.

In the code, `$(".woocommerce-store-notice").outerHeight()` gets the height of the notice and applies the value to `margin-top` of `.wrapper`

```js
$(".wrapper").css({"margin-top":$(".woocommerce-store-notice").outerHeight()})
```

```css
.wrapper {
    background:wheat;
}

.woocommerce-store-notice, p.demo_store {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    font-size: 1em;
    padding: 1em 0;
    text-align: center;
    background-color: #a46497;
    color: #fff;
    z-index: 99998;
    box-shadow: 0 1px 1em rgba(0,0,0,.2);
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="woocommerce-store-notice demo_store" style="display: block;">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
<div class="wrapper">
This is my content
</div>
```
If you can't change the html markup, you can use `flex` to change the order of your selectors i.e. `.woocommerce-store-notice, p.demo_store` would be `order: 0;` and `.wrapper` would be `order: 1;` This way you don't have to depend on absolute positioning to make sure the notice appears at the top of your page.

Try the snippet below.

```js
// dismiss the notice by clicking the "Dismiss" link"

document.querySelector('.woocommerce-store-notice__dismiss-link').addEventListener('click', function(e) {
  e.preventDefault();
  document.querySelector('.woocommerce-store-notice').style.display = 'none';
});
```

```css
* {
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
}

.wrapper {
  background: wheat;
  order: 1;
}

.woocommerce-store-notice,
p.demo_store {
  order: 0;
  font-size: 1em;
  padding: 1em 0;
  text-align: center;
  background-color: #a46497;
  color: #fff;
  box-shadow: 0 1px 1em rgba(0, 0, 0, .2);
}
```

```html
<div class="flex">
  <div class="wrapper">
    This is my content
  </div>
  <p class="woocommerce-store-notice demo_store">DEMO NOTICE CLICK HERE <a href="#" class="woocommerce-store-notice__dismiss-link">Dismiss</a></p>
</div>
```