{"id":2649,"date":"2012-05-03T13:19:16","date_gmt":"2012-05-03T13:19:16","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2649"},"modified":"2019-08-02T10:55:08","modified_gmt":"2019-08-02T10:55:08","slug":"crear-una-cabecera-fija-con-css","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/","title":{"rendered":"Como crear una cabecera fija con CSS"},"content":{"rendered":"

En este art\u00edculo vamos a ver como crear una cabecera fija<\/strong> utilizando simplemente HTML<\/strong> y CSS<\/strong>.<\/p>\n

Cuando un usuario hace scroll<\/strong> para ver m\u00e1s contenido en la pantalla, la cabecera siempre permanece visible dando visibilidad permanente a los elementos que desees incorporar en la cabecera fija. Un men\u00fa de navegaci\u00f3n puede ser el contenido ideal para una cabecera fija.<\/p>\n

Dentro del cuerpo de la p\u00e1gina o dentro de la etiqueta <body> puedes agregar todo el contenido de tu p\u00e1gina con los siguientes contenedores:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> id<\/span>=<\/span>"page"<\/span>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"header"<\/span>><\/span>Cabecera fija con CSS<\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"content"<\/span>><\/span> \n        <p<\/span><\/a>><\/span>Lorem Ipsum...<\/<\/span>p<\/span><\/a>><\/span> \n    <\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Por un lado, tenemos el contenedor que contiene la cabecera fija, el div con identificador \u00abheader\u00bb y, luego el contenido de la p\u00e1gina lo puedes depositar dentro del contenedor con identificador \u00abcontent\u00bb.<\/p>\n
En el contenido de la p\u00e1gina, contenedor con identificador \u00abcontent\u00bb agrega mucho contenido para ver el efecto.<\/p>\n
En la hoja de estilos que est\u00e9s utilizando agrega las siguientes reglas CSS<\/strong>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
body {<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n    padding<\/span>:<\/span> 60px<\/span> 0 0 0<\/span>;<\/span>\n}<\/span>\n \n#page<\/span> {<\/span>\n    margin<\/span>:<\/span> 0px<\/span> auto<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n}<\/span>\n \n#header<\/span> {<\/span>\n    position<\/span>:<\/span> fixed<\/span>;<\/span>\n    top<\/span>:<\/span> 0<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    padding<\/span>:<\/span> 15px<\/span> 20px<\/span>;<\/span>\n    background-color<\/span>:<\/span> #333<\/span>;<\/span>\n    font-size<\/span>:<\/span> 20px<\/span>;<\/span>\n    color<\/span>:<\/span> #FFFFFF<\/span>;<\/span>\n}<\/span>\n \n#content<\/span> {<\/span>\n    height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    overflow<\/span>:<\/span> auto<\/span>;<\/span>\n    padding<\/span>:<\/span> 0<\/span>%<\/span> 1<\/span>%<\/span> 0<\/span>%<\/span> 1<\/span>%<\/span>;<\/span>\n    width<\/span>:<\/span> 98<\/span>%<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Y con este c\u00f3digo tan simple ya puedes tener tu cabecera fija con CSS<\/strong> en tu p\u00e1gina web.<\/p>\n
La clave de la fijaci\u00f3n est\u00e1 en asignar una posici\u00f3n fija al elemento con id=\u00bbheader\u00bb con:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
position<\/span>:<\/span> fixed<\/span>;<\/span><\/pre><\/div><\/div>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.<\/p>\n","protected":false},"author":1,"featured_media":7388,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[74],"class_list":["post-2649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-contenedores"],"yoast_head":"\nComo crear una cabecera fija con CSS - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como crear una cabecera fija con CSS - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-03T13:19:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-02T10:55:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/\",\"name\":\"Como crear una cabecera fija con CSS - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png\",\"datePublished\":\"2012-05-03T13:19:16+00:00\",\"dateModified\":\"2019-08-02T10:55:08+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png\",\"width\":1000,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como crear una cabecera fija con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como crear una cabecera fija con CSS - Jose Aguilar Blog","description":"Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Como crear una cabecera fija con CSS - Jose Aguilar Blog","og_description":"Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-05-03T13:19:16+00:00","article_modified_time":"2019-08-02T10:55:08+00:00","og_image":[{"width":1000,"height":1000,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/","url":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/","name":"Como crear una cabecera fija con CSS - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png","datePublished":"2012-05-03T13:19:16+00:00","dateModified":"2019-08-02T10:55:08+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Descubre como crear una cabecera fija con CSS y HTML de forma simple. Tutorial y c\u00f3digo de ejemplo que puedes descargar gratis.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/cabecera-fija-con-css.png","width":1000,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/crear-una-cabecera-fija-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Como crear una cabecera fija con CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2649"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2649\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7388"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}