How the top property in absolute positioning is determined by the parent element's width

After analyzing the provided HTML code

<div class="child-of-body">
    This is a text
</div>

and reviewing the accompanying CSS code

.child-of-body {
    position: absolute;
    top: 10%;
}

I have successfully adjusted the top value for the specified elements. Upon further examination, I noticed that the 10% calculation is based on the height of the parent element.

My question now is how to set the top property in percentage values relative to the width of the parent element?

Although I am aware this can be achieved using JavaScript, I am curious if there is a CSS-only solution available.

JSFIDDLE

javascripthtmlcss

Answer №1

Perhaps you are searching for the margin-top attribute.

When using a percentage value for top/bottom padding or margins, it is in relation to the width of the block container.

.child-of-body {
    position: absolute;
    margin-top: 10%;
}

See JSFiddle Demo.

You may also find interest in reading Louis Lazaris' Vertical Percentages in CSS article.

Answer №2

Consider adding the CSS property position: relative to the containing element.

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

Eliminate unnecessary spacing from the sticky container

Trying to implement a sticky menu in an angular 14 project using angular material 14 has been quite challenging for me. Initially, I attempted to use the 'fixed' position, but encountered issues where the menu would consistently return to the to ...

htmlcssangularangular-material

Error: The method ele.addEventListener is not valid

Can someone please help me identify the issue in my code? I've included both HTML and JavaScript below. The code runs without any errors in Visual Studio Code, but when I try to use it on an online site, I get the following error message: "Uncaught Ty ...

javascript

JavaScript date parsing with the Central European Time (CET) as the default timezone

Dealing with legacy webservices that inconsistently localize dates can be challenging. Sometimes the dates include timezone information, but other times they do not. In this case, I need to accommodate both scenarios. The requirement is for the dates to a ...

javascriptdateparsingtimezonetimezone-offset

What is the best way to position a semi-circular donut graph in the center?

I am attempting to showcase a doughnut or semi-circle chart within a materialize card, which is a responsive div element. My goal is to present simple data and utilize the chart as a progress bar. I took inspiration from the example provided in the HighCh ...

javascriptcsshighcharts

Disconnecting socket when A-tag with Href is clicked

Currently, I am working on a project that involves using socket.io. In this project, I need to provide users with links to download files. <a href="<path>" >Link Name</a> Interestingly, whenever I click on the link to download the file, ...

htmlhref

What is the best way to retrieve a property value from an object using the .find() method?

I've encountered a problem with the following code snippet in my function: let packName: string = respPack.find(a => {a.id == 'name_input'}).answer.replace(/ /,'_'); My goal is to locate an object by matching its id and retrie ...

javascriptangulartypescript

Tips for effectively adjusting lighting in a customized shader material

Presenting a demonstration showcasing the use of a height map in three.js coupled with custom shader(s). Everything appears to be functioning smoothly now. The working demo can be found on this link. Below are the shader scripts: <script id="vertexShad ...

javascriptthree.jsglsl

Creating a stationary navbar and sidebar with Bootstrap for your website

Is there a way to make the navbar and sidebar fixed when the user scrolls down the page without altering their design? I need them to be responsive as well. Can anyone assist me with this using bootstrap? Here is my fiddle: https://jsfiddle.net/exyvat08/17 ...

htmlcssresponsive-designbootstrap-4

Managing asynchronous requests with RxJS for time-spaced dependent API calls

I am currently working on developing a code in Angular 11 to handle the following scenario: I have a list of files, and for each file, I need to make an API call (let's say api1) to retrieve a fileId from the response. Subsequently, I will use this f ...

javascriptangularrxjsrxjs-observables

What is the best way to showcase my identification number from the database table?

Hello, I'm currently a web programming student facing an issue with displaying information from my database table. Everything is showing up perfectly except for the ID number, and there are no errors to help me identify the problem. Can someone review ...

phphtmlmysql

Transferring information from a class component to a Functional component in React Native

I'm new to React Native and javascript, so I'm facing a challenge in my app. I have a class Component that functions as a popup. It appears when a touchable opacity is pressed and shows a menu. My goal is to retrieve the id of the button clicked ...

javascriptreactjsreact-nativereact-navigation

Navigating HTML Symbol Entities: Mastering the Art of Floating

I need to figure out how to make an HTML symbol entity stay fixed on the browser screen. It's for a Sign-In page and I'm trying to have a down arrow float next to a sign in link, positioned approximately 25px from the left and 10 px from the top ...

htmlcss

React app experiencing issues with onClick button methods not functioning as expected

Here is the React code for a sample homepage. My intention was to have the function run and update the page when the buttons are clicked. However, instead of updating the page, it keeps showing alerts. I have confirmed that the fetch function is pulling da ...

javascriptreactjs

all elements with equal height within a flexbox positioned at the bottom

Check out this HTML code snippet I have for constructing a grid using Bootstrap 4: <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOh ...

twitter-bootstrapcssflexboxbootstrap-4

What is the best way to remove the white dots that are showing up next to my Navbar links on a bootstrap template?

I've been utilizing this template from ShareBootstrap and it has been running smoothly, except for one pesky issue: Mysterious white dots that are labeled as li.nav-tem::marker keep showing up about an inch to the left of each Navbar link. Here is so ...

htmlcssbootstrap-4navbar

What could be causing Next.js to throw an error upon completion of the MSAL OAuth process?

I encountered an error while building a website using next.js. The site is set up for production, and after the authentication process with MSAL for Azure AD integration, I am facing the below error during the OAuth loop. As a beginner in next.js coming fr ...

javascriptnode.jsreactjsnext.jsmsal.js

Setting input type to date with full width using jQuery Mobile

Currently working on a web project utilizing jQuery Mobile 1.1.1 and looking to incorporate a <input type="date" /> that spans the entire width of the page. However, encountering a peculiar issue (noticing a gap where an arrow should be displayed) sp ...

javascriptjqueryiosmobilejquery-mobile

Edge fails to verify if the HTML document has been modified

Encountering an issue where Edge does not seem to be properly checking for changes in an HTML document, unlike Firefox and Chrome. Despite updating the document, Edge continues to display the old version of the page while Firefox and Chrome show the update ...

cachingwebhtmlmicrosoft-edge

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

I have set up a server that receives data from a gaze sensor, as well as an HTTP server that serves an HTML page. I am looking for a way to dynamically highlight elements in the HTML based on the incoming data. Any suggestions on what resources or techniqu ...

javascriptjqueryhtmlnode.jsnode-webkit

Encountered an issue when trying to generate a shader cache entry- there was an error when attempting to locate an

Today, I decided to write a basic Python script utilizing Selenium that would identify an element by its Css selector. My target? The input field on the Google webpage, specified by input[name=q] Upon running the script, Chrome opened as expected but prom ...

pythoncssseleniumselenium-webdriverselenium-chromedriver