Sticky Ads with HTML and CSS.

Today, digital advertising is growing at a faster pace. Therefore, lots of clients want to sell ads on the website.

What are sticky ads?

Sticky ads are ads that stay visible while the user scrolls through the content of the web page. There are two types of sticky ads horizontal and vertical sticky ads.

Horizontal ads:

These ads have a landscape view, and they are mostly displayed on the top, middle, and bottom of the page.

Vertical ads:

These are portrait view ads and they're placed vertically on the sidebar of the webpage. When the user scrolls through the content, they stick to the webpage in the given position.

Sticky ads with HTML and CSS:

With the help of CSS position: sticky, we can create sticky elements on a webpage.  It is very simple and straightforward CSS.

Here is the HTML and CSS code for vertical ads:

CSS code:

Here is the jsfiddle link for vertical ads with a working demo:  https://jsfiddle.net/zkLw8ayd/9/

Sometimes clients want there ads to be in the middle of the contents, so we need to create horizontal ads (Landscape View).

Here we have a code for horizontal ads:

CSS code for horizontal ads:

In the upper CSS code, sticky ads in the middle of the content are not working. This is because, most of the time, beginners give the same height to both the parent and child elements. Therefore, there is no room left for the sticky position. So whenever we use the sticky position on the child element, make sure the child’s parent is taller than the child. So that it gives the child element room to be sticky to its parent.

CSS for the sticky nested child element:

.p-static{
  position: static;
  padding: 100px 0;
  height:1000px;
}

Here is the CSS jsfiddle link for Nested Child element content sticky ads: https://jsfiddle.net/sdkf1qro/1/