How can I position an element to the bottom right using CSS?

Is there a way to position this element to the bottom right corner?

HTML

<div class="info player">
            <div id="job" style="display:none;"><span>Jobname</span></div>
            <div id="status">
                <ul>
                    <li class="icon" id="thirst" style="display:none;"><i class="fas fa-tint"></i><span></span></li>
                    <li class="icon" id="hunger" style="display:none;"><i class="fas fa-utensils"></i><span></span></li>
                    <li class="icon" id="stamina" style="display:none;"><i class="fas fa-running"></i><span></span></li>
                    <li class="icon" id="armor" style="display:none;"><i class="fas fa-shield-alt"></i><span></span></li>
                    <li class="icon" id="health" style="display:none;"><i class="fas fa-heart"></i><span></span></li>
                </ul>
            </div>

CSS

.info { position: absolute; }

.info.server { bottom: 0; right: 0; }
.info.server #server img { max-width: 100%; opacity: 0.75; }

.info.player { bottom: 0; right: 0; text-align: right;}
.info.player #job span { font-size: 20px; color: #FFF; font-weight: 900; text-transform: uppercase; text-shadow: 0px 1px 1px rgba(0,0,0,0.75); }

.info.player #status { clear: both; }
.info.player #status ul { margin: 1px 0 0 0; }
.info.player #status ul li { float: right;}
.info.player #status ul li#health span { background: linear-gradient(180deg, #ff0000 0%, #aa0000 100%); }
.info.player #status ul li#armor span { background: linear-gradient(180deg, #0bcfe6 0%, #0aa3b5 100%); }
.info.player #status ul li#stamina span { background: linear-gradient(180deg, #ffb700 0%, #e0a102 100%); }
.info.player #status ul li#hunger span { background: linear-gradient(180deg, #ff8000 0%, #cd6700 100%); }
.info.player #status ul li#thirst span { background: linear-gradient(180deg, #00c3ff 0%, #008fbb 100%); }
.info.player #status ul li#health.dead { animation: trew-pulse 500ms infinite; }
.info.player #status ul li#health.dead span { height: 0 !important; }
.info.player #status ul li#health.dead i.fas:before { content: '\f714'; }

Despite changing the .info.server and .info.player settings to bottom right, they are still displaying at the top left corner.

css

Answer №1

When you refer to "this," are you talking about the 

<div class="info player">
? To have it positioned in the bottom-right corner of the window (or inside another element, if that's what you meant), simply include 
position: absolute; bottom: 0; right: 0;
in your style rules for the .info.player selector and ensure no other styles override it.

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

Chart displaying an errant scrollbar at the bottom of the screen

Having trouble with a table that displays a scrollbar when a specific row is added. The first and second rows in the code below display correctly. However, adding the third row within the foreach loop causes a scrollbar to appear at the bottom. This issu ...

htmlcss

Issue with CSS not loading correctly when switching routes in AngularJS using Gulp and Router

I currently have a router set up in my application: var mainmodule.config(function($routeProvider){ $routeProvider.when('/home',{ templateUrl:'src/home/home.html' }; $routeProvider.when('/home/sports',{ ...

cssangularjsgulpangular-routing

Swap the text within the curly braces with the div element containing the specified text

I have an input and a textarea. Using Vue, I am currently setting the textarea's text to match what's in the input field. However, now I want to be able to change the color of specific text by typing something like {#123123}text{/#}. At this poin ...

javascripthtmlcssvue.js

<ul><li>issue with indentation

Is there a way to eliminate the indent from my unordered list? While inspecting the element, I noticed what appears to be padding between the width of the box and the content. However, setting padding to 0px and margin to 0px doesn't seem to work as t ...

htmlcss

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

cssangular

Issue with MUI Grid item not functioning properly when using overflowY: "auto"

I am encountering an issue while using MUI with React. I have a <Paper> element wrapping a <Grid> with 3 children elements. The problem arises when I set the overflowY property of the bottom grid item to "auto" - instead of showing the scroll b ...

cssreactjsflexboxgridmaterial-ui

Tips for effectively utilizing the Material-UI Grid component to implement this layout

Currently, I am working on incorporating this design in Material-UI by utilizing the Grid component. To better delineate the boundaries, I have marked the container border in red for clarity. The Add button should be positioned at the far right of the c ...

csslayoutmaterial-ui

Adjusting the size of images in a Bootstrap lightbox gallery

I am currently working on a website for an artist, making the galleries a key aspect. The website is built using Bootstrap, with the Lightbox for Bootstrap plugin being used for the galleries. Everything seems to be working well in terms of adjusting the i ...

javascripthtmlcsstwitter-bootstrap

Issue with jQuery Cycle causing images not to load in IE all at once, leading to blinking

When using the jQuery Cycle plugin in IE8 (as well as other versions of Internet Explorer), I am encountering an issue. My slideshow consists of 3 slides, each containing a Title, Description, and Image. The problem arises when viewing the slideshow in I ...

javascriptjqueryhtmlcsscycle

Why won't the display: block CSS style apply to my div element?

Take a look at my code: https://jsfiddle.net/r62p4209/ I created a search bar with company brand name and some buttons on the right, positioned in the center. My aim is for the search bar (from "search by:" to the "Go!" button) to move onto the next lin ...

htmlcssdisplay

Struggling to incorporate a basic drop-down into my design despite implementing transitions

Looking to optimize space on a webpage, I am interested in creating a hover effect for topics that reveals sub-topics with a smooth ease-out animation. Here is an example of the effect I am aiming for: https://jsfiddle.net/170z6pj1/ I have been strugglin ...

htmlcsstransition

What steps should I take to make this slider functional?

How can I achieve a sliding effect on this code? I want the div to slide out when the button is clicked, but I also want the button itself to move. Additionally, how can I ensure that the image and text are displayed in two columns? In my IDE, it appears a ...

javascripthtmlcssbxslider

The background image is cropped, causing a scroll bar to be added

I've been attempting to add a background image to my HTML using the code below: body { margin: 0; background: url('images/lightning.jpg') no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -mo ...

htmlcssimagebackgroundbackground-image

Using Sass to Loop through Specific Items

Currently, I am in the process of developing a SASS loop to iterate over a series of images (let's say 50). My goal is to increment the transition delay by 50ms for every nth-of-type image. However, it appears that the current for loop I have implemen ...

cssfor-loopsass

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...

htmlcssangularng-zorro-antd

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

css

Enhance your website with a customizable language selection feature using HTML and CSS

Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...

htmlcss

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually ...

htmlcssangulartypescriptangular2-template

Uncovering the media:thumbnail in an RSS feed using Scrapy's CSS selector

I am currently working on parsing an RSS feed that includes image URLs. The XML file structure is as follows: <item> <title>Item Title Goes Here</title> <link>https://www.google.com</link> <media:thumbnail url="https:/ ...

pythoncssscrapy

Creating a dynamic linear gradient background color using Angular 2 binding

Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...

htmlcssangular