Originariamente inviata da
KillerWorm
Ciao, il
position:fixed sottrae l'elemento dal normale flusso del documento, slegandolo dagli elementi circostanti. Per questo motivo l'impostazione dei margini non ha l'effetto desiderato.
Assieme al
position:fixed puoi utilizzare le proprietà
left e
right, in questo caso usando un valore percentuale, per "allontanare" il div dai lati del contenitore.
Da precisare però, dal momento che altre proprietà del
div stesso (come
border,
padding, ecc.) possono creare conflitti se ne viene specificato il
width, è meglio se il browser calcoli automaticamente la larghezza totale di tale elemento. Basterà non specificare alcun
width.
Inoltre, diverse regole del tuo css possono essere ottimizzate utilizzando delle forme contratta.
Un esempio pratico:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: Tan;
}
.question_alert_box {
padding: 2px;
border:solid black;
border-width: 2px 2px 0;
background: White;
color: Black;
font-weight: bold;
text-decoration: none;
z-index: 2;
position: fixed;
bottom: 0;
/* con left e right a 5%, risulta una larghezza totale dell'elemento del 90% */
left: 5%;
right: 5%;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
<div class="question_alert_box">est laborum.</div>
</body>
</html>
Rispondi quotando
