CSS - Maximizing the effectiveness of position:absolute by optimizing for specific screen sizes

With a body width of 800px:

body {
width:800px;
margin:15px auto;}

A <div> area (100x200px) is intended to be positioned in the TOP RIGHT corner of the body, regardless of screen size or browser. The code attempted is as follows:

#login-hover-cont{width:210px;padding:20px;position:absolute;right:0px;_right:-1px;top:30px;z-index:3;background:#fff}

The current result places the div in the TOP RIGHT corner of the SCREEN instead of the specified location - aligned with the right border of the BODY. Seeking an alternative solution without using "position:relative".

htmlcss

Answer №1

Modify your body to the following.

body 
{
    width: 800px;
    margin: 15px auto;
    position: relative;
}

Ensure that your div is contained within the body and styled similarly to this.

#login-hover-cont
{
    ...
    position: absolute;
    top: 30px;
    right: 0px;
}

This adjustment is necessary as absolute positioning is always in relation to the closest positioned ancestor element.

Answer №2

Instead of setting the body width to 800px, it's better to keep it as auto width and wrap it in a container div. The container div should have a width of 800px and a position:relative style. This way, the absolutely positioned elements will be relative to the container div.

Check out this example:

http://jsfiddle.net/8bG3r/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible in Angular to first escape HTML strings and then add HTML markup?

Working with a search form in Angular that pulls data from a database and includes an array of strings, I implemented a pipe to highlight the search query in the results by wrapping it with <mark></mark>. This feature has been quite useful so f ...

javascripthtmlangulartypescriptdom

Respond.js appears to be without functionality

Can anyone lend a hand? I'm feeling incredibly frustrated trying to get respond.js to cooperate. Typically, we have no issues with using it on our mobile sites. However, I am currently facing challenges trying to achieve mobile compatibility on one o ...

htmlcssresponsive-designrespond.js

Activate the front camera on an Android device using HTML5 or JavaScript

I'm currently working on a web app that needs to access the front camera of Android phones running version 4.0 or higher. After taking a picture, the app should then upload the captured image to my own server. Is there a way to launch the front camer ...

javascriptandroidhtmlandroid-intent

Having trouble with your website div not appearing correctly on Firefox?

I'm facing an issue with the display of a website (found here). The elements inside the div with the class name of .index_container are not appearing correctly in Firefox. Despite being present, they remain invisible. I've attempted to resolve th ...

htmlcssfirefoxsass

Clear the applied style from a specific DIV element

Currently, I am working on iPhone development and have set up a webview with a DIV element. Within this DIV, I have added 'touchstart', 'touchend', and 'touchmove' events. However, I have noticed that after adding these event ...

javascriptiphonehtmlcss

Enabling and Disabling Input Fields Based on Selections in VueJS

Originally submitted on es.stackoverflow.com by José: I came across an example in JavaScript that works, but I'm struggling to implement it in vue.js. I've been attempting it for some time without success. Apologies for any inconvenience. < ...

javascripthtmlvue.js

Tips for accurately placing a border on an active link using active_link_to in Rails 4

Currently, I am utilizing active_link_to to monitor changes in the state of my navigation bar links. Upon adding styling to the active state, the appearance resembles the image depicted below. My aim is to shift the border of the active state towards the t ...

cssruby-on-railsrubyruby-on-rails-4bootstrap-4

What is the best way to align inline-block elements in a straight row?

I am encountering an issue with the code block below: <div class="1"> Foo<br>1 </div> <div class="2"> Bar<br>2 </div> Even though both .1 and .2 have styles of position:relative;display:inline-block, they are displ ...

htmlcss

Ways to prevent a background image from centering at a designated width

Is it possible to prevent a background image from centering at a specific width? To demonstrate the issue, try narrowing the width of the website linked below until scroll bars appear. Take note of how the background image stays centered while other eleme ...

css

An AngularJS directive designed to execute after a text input has been modified

I have integrated a bootstrap calendar datepicker that interacts with and updates an <input type="text"> field. As of now, when I use ng-change="myAngularExpression()", the function gets executed the moment the text box is selected. Is there a way t ...

javascriptangularjshtmlangularjs-directiveangularjs-ng-change

Having trouble reaching the elements stored in an array?

As a beginner in Angular and JavaScript, I may be making some obvious mistakes so please bear with me. I have written this code that allows the selection of 2 text files and then combines them into a single array. $scope.textArray = []; $scope.textUpload ...

javascripthtmlarraysangularjs

Examining the code - I'm having trouble locating the origin of its creation

My question might seem trivial and I could figure it out on my own, but for some reason, it's just too difficult for me. I can easily find details like the width and height of a div, the background color, and the font used. However, what I can't ...

jqueryhtmlcss

Why does Three.js change the innerWidth and innerHeight of a div on its own after being set with the width and height of a plane?

Greetings, I have a question. In my attempt to adjust the innerWidth and innerHeight of the div container which houses a canvas element, I am using the code snippet below. The crucial part is the loader.load function that gets executed upon completion of ...

javascripthtmlcsscanvasthree.js

I am having trouble locating elements with my Selenium program, what steps should I take to troubleshoot and resolve this issue

I'm facing trouble locating an element. Even when I use the function .page_source, it only returns an empty string. I am currently writing code on google colab. import sys sys.path.insert(0,'/usr/lib/chromium-browser/chromedriver') from sele ...

pythonhtmlseleniumwebweb-scraping

Can you explain the concepts of 'theme' and 'classes'?

Currently, I am working on a web application using React. I have chosen to incorporate the latest version of Material-UI for designing the user interface. During this process, I came across the demo examples provided by Material-UI (like ) In each demo ...

javascriptcssreactjsmaterial-uijsx

Align text to the right and do not include any images

I am attempting to align the images back to the left under the title, while only floating the description text to the right. I am struggling with clearing the image floats. HTML: <div class="title">System Displays</div> <div class="descrip ...

htmlcsscss-float

Having trouble triggering drag events efficiently with d3-drag on SVG elements

drawAll refers to a two-dimensional array where each drawAll[i] element represents a drawing containing all the strokes. A stroke is essentially a string representing a series of 2D points that can be utilized to generate a <path>. I am currently at ...

javascripthtmld3.jssvgdrag-and-drop

What is the best way to vertically center a div within another div when the height is not known?

I have a challenge with creating a div container that has a div for an image and a div for text. The height of the parent div is set to match the height of the text div automatically. I don't want to give the container an actual height. My goal is to ...

htmlcss

The positioning problem arising from using a Vuetify select dropdown within a datatable

Vuetify datatable is being used with 20 columns, functioning properly. To view all the columns, horizontal scrolling is available. Filters are needed for each column in the header, achieved using v-slot:header. An issue arises when clicking on the select ...

cssvue.jsvuetify.js

Creating a HTML5 Geolocation object using Python: A step-by-step guide

For my software analytics testing, I am looking to send GET requests with a geolocation object that includes variable timestamps and locations. The website utilizes the HTML5 navigator.getcurrent.location() function. While I can use the random module to r ...

javascriptpythonhtmlgeolocation