Correct proceudre to overlay one widget over – relative & absolute?

I have an events plugin that lists 3 events on our WordPress site. I wish to have a graphic that links to All Events on the page.

I have done this by creating a graphic with a href link using the text widget. Then setting this to absolute and positioning. The problem is when the site is made responsive the graphic moves out of place.

Read More

Ss there any way of tying the widget to another widget using relative and absolute positioning. ie. So it always stays in the bottom right despite any changes in screen resolution.

Related posts

1 comment

  1. You can do this by using bottom and right instead of top and left in your absolute positioning.

    In the below example the ‘meow’ span will stay anchored to the bottom right corner when you resize.

    html,
    body,
    div {
      height: 100%;
    }
    div {
      position: relative;
      border: 1px solid red;
    }
    span {
      position: absolute;
      bottom: 20px;
      right: 20px;
      background-color: green;
      color: white;
      padding: 4px;
    }
    <div>
      <span>meow</span>
    </div>

Comments are closed.